Welcome to Style & Animate
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.
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.
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)
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:
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
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)