CSS3 style support is a little flaky on some browsers, and varies from browser to browser. If you are using things like Transforms or Filters, it’s a good idea to check the end result on different browsers. Old PC browsers may not support CSS3 animations.

On Microsoft Edge, background attachment of fixed does not work in the editor, although it will work in the end-user site as expected; decoration-style for underlining is not supported.

Firefox: it has to be said that Firefox is not the best of browsers for handling CSS these days. It does not handle 2D and 3D transforms as well as other browsers, especially with 3D perspectives which will show up OK in the editor but may not be the same in the end-user site. Always try to use position and dimensions where possible, rather than a transform. Always check that the transforms work as expected across different devices and browsers as they can be dependant upon the structure of the page. A but in Firefox stops a style from being animated if it is marked as !important, although this does not affect other browsers. Styles are not usually marked as !important (inlined) and are not marked !important by the plugin for animations, so this should not normally be an issue.

Backgrounds images can be combined with gradients, by setting the gradient color to partially transparent. In the editor you can combine as many gradients as you wish, but the output will only combine one with a background image, i.e. linear gradient or radial gradient, with a background image. but not both. This may be addressed in a future version.

Style and Animate has been tested extensively with many themes. While it is not best practice to style a theme using JavaScript, if a theme does use JavaScript to apply styles then those will override any CSS styles which this plugin creates, and the end-user may still see the original theme styles even though the Styles Editor shows the changes you have made (this is because the Styles Editor uses JavaScript to apply styles, but the end-user sees pure CSS styles). Similarly, any animations done by the theme in JavaScript will override those created with this plugin, although you will see that happen in the editor.

 

If a particular theme does not style properly, and if that theme is publicly available, please let us know, and please give feedback if you have any issues or suggestions.