Style & Animate is a visual styles editor and keyframe animator for WordPress.

The front-end editor makes it easy to change or add styles on any page or post, apply styles and animations on single pages or across the whole site, and build animations and transition effects quickly by setting styles on individual keyframes.

Style & Animate produces pure CSS, it does not use JavaScript to change the site appearance. Style & Animate was developed specifically not to use JavaScript to create style changes in the web site, so all styling is done in a single CSS style sheet. This keeps bloat down and the site runs as if the new styles and animations are part of the theme, not added on afterwards in script – so there is no extra JavaScript to slow the site down.

If you are developing a site, you can even copy the styles directly into your own style sheets and use them in any site regardless of whether the plugin is installed or not.

To get Style & Animate, go to the Plugins -> Add New page, and search for Style & Animate. It is also available for direct download on wordpress.org.

Features:

  • Front-end visual editor with simple user interface

  • Existing styles are loaded into the editor and can be changed as needed

  • All styles are clearly laid out and highlighted when they are changed

  • Supports 2D and 3D animations

  • Set background images from the file browser

  • Apply style to all sub-styles in one go (e.g. border) or apply sub-styles individually (e.g. border-left)

  • Outputs pure CSS, no JavaScript needed in the live site

  • CSS can be used in external style sheets if required

  • View the CSS output at any time, and copy / paste it

  • Set styles on individual keyframes to build animations and transitions

  • Drag and drop keyframes

  • Play animations in real time, and stop on any keyframe

  • Loop animations and create delays

  • Apply styles and animations to a single element on one page or post, or across the entire site

  • Development mode, so style changes don’t go live until you are ready

  • Animations do not run until they are scrolled into view, when the editor is not loaded.

Pure CSS for the end-user:

The entire plugin only loads for editing styles. When you are not logged in, all the styles and animations are loaded directly from a CSS style sheet, with ‘no’ JavaScript. Actually, there is one tiny piece of JavaScript used to stop the animations from playing if they are outside the visible part of the page – once they scroll into view, they will play automatically.

Supported styles:

Font – Color, Font Family, Size, Weight, Style, Line Height, Variant, Letter Spacing, Transform, Decoration, Decoration Style, Align and Overflow
Position – top, left, bottom, right
Dimensions – width, height
Padding – top, left, bottom, right
Margin – top, left, bottom, right
Border-radius – top-left, top-right, bottom-left, bottom-right
Opacity
Filter – Blur, Brightness, Contrast, Grayscale, Hue-rotate, Invert, Saturate, Sepia
Box-shadow – Distance, Blur, Spread, Color
Text-shadow – Distance, Blur, Color
2D / 3D transform – Translate, Scale, Rotate, Origin, Skew (2D)
Background – Color, URL (from browser), Left, Top, Width, Height, Repeat, Size, Clip, Attachment
Linear gradient – Angle, Color 1 and Color 2
Repeating linear gradient – Angle, Color pairs (add as required)
Radial gradient – Left, Top, Type, Placement, Color 1 and Color 2
Repeating radial gradient – Left, Top, Type, Placement, Color pairs (add as required)
Overflow
Display

 

To get started, please go to the Quickstart page. For a full explanation of all the features, see Creating Styles and Creating Animations and Transitions.

We hope you find the plugin useful, please leave any comments or suggestions on the Blog. You can post questions on the Support Forum. If you have any problems please let us know.