Style & Animate – Front-End Visual Style Editor and Keyframe Animator

Description

Style & Animate is a visual style 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 outputs pure CSS, and only loads the JavaScript animation library when you are logged in; for the end-user, all the styles load directly from CSS so there is no 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.

Front-end visual editor with simple user interface

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

Outputs pure CSS, no JavaScript needed for the live site

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

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

Screenshots

  • Creating an animation, with the Styles Editor panel (on the right) and the Timeline at the bottom of the screen.

Installation

  1. Download plugin from WordPress plugin repository
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. There will be a Style & Animate menu button in the admin area, which opens the admin page – there is a ‘Help’ tab at the top.
  4. Navigate to any page. There will be a ‘+Style/Animate’ button in the admin bar at the top. Click that, then click anywhere on the page to start styling.

FAQ

Installation Instructions
  1. Download plugin from WordPress plugin repository
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. There will be a Style & Animate menu button in the admin area, which opens the admin page – there is a ‘Help’ tab at the top.
  4. Navigate to any page. There will be a ‘+Style/Animate’ button in the admin bar at the top. Click that, then click anywhere on the page to start styling.
Can I change styles on pages and posts?

Yes, it does not matter what you apply styles to. Style changes for Posts will appear on the post and archive pages.

Can I apply styles across the site?

Yes, styles can be set on a per-item, per-page or global basis

Do I need to edit any HTML?

No, everything is done from the front-end style and animation panels.

Do I need to know any CSS syntax?

No, you can just edit the style values and see what the changes look like.

Do all the changes go live immediately?

Yes, unless you switch to Development mode, in which case only you can see the changes.

I can see the changes made in the editor, but how can I see the changes in the live site?

If you are no in Development mode, just open a second (different) browser, one which you are not logged in to, and refresh the page in that.

Can I edit the pages with Style & Animate?

The plugin does not allow you to add text or HTML to the site, although you can hide elements.

Can I produce nested animations?

That facility will be available in a future version

Can I set individual keyframes for animations?

You can set as many keyframes as you need, and apply style changes to those individually. You can also pause playback on a single keyframe.

Are the site’s style sheets changed at all?

No. All the style changes are done in a separate style sheet.

Can I use the styles in my own stylesheets?

Yes, you can view the style CSS and copy / paste it into your own style sheets.

Are the styles and animations generated by JavaScript?

The styles and animations are output as pure CSS(3) so no JavaScript libraries are loaded for end-users of your site. JavaScript is only used for the styles editor, plus a small line of script just to play animations when they scroll into view.

Where are the styles saved?

All the styles and animations are output to the Uploads folder, in css3kfa/generated-styles

Can I edit the style sheets which are already used in my site?

Style & Animated does not allow you to edit any of your site’s style sheets, all changes are made ‘on top’ of the site’s existing styles.

Can I import the styles into another site?

You can copy the styles into the style sheet of another site.

Can I import the animations into another site?

That facility will be available in a future version.

What happens to my styles if I disable / delete the plugin?

Your style changes will no longer appear on the site, but will remain internally so if you re-enable the plugin, you will get them back again.

Contributors & Developers

“Style & Animate – Front-End Visual Style Editor and Keyframe Animator” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.12

  • Fix to gradient rotation

1.11

  • Fixed some cross-theme compatibility issues for displaying the styles panel and timeline

1.1

  • Added viewport-relative units

1.0

  • Initial release