January 22

How to Easily Add CSS Animations in WordPress

It is easy to add animation with CSS style straight from WordPress themes. On many sites you can find animated design elements of individual parts or entire Web page. It is especially popular in single-page sites that often offer to buy any product. A beautiful animation, nice design helps to attract the attention of users. Today, we look at an interesting plugin that makes it very easy to add animations of CSS to posts in WordPress templates. You can animate almost everything - from entire blocks to plain text. The plugin Animate It! there is a huge selection of different animation effects. The following plugin includes all these gorgeous effects and does not require messing around with the source code.

Animate It plugin for WordPress themes:

Choice to use the animation in different CSS styles;
More than 50 animation effects;
Adding animation to posts, pages;
It is possible to add animation to the widgets, pre-generated animation class with an example.

After installing and activating the plugin you will see a new settings tab «Animate It!». It contains a couple of options on/off animation on smartphones, tablets. The main configuration and control are in the visual editor.

Clicking this button opens a modal window, where you can choose the style of animation and designate additional parameters. When it is determined with all the settings, you need to press the "Insert" to add animation to the article with template examples. You will need to replace the text on their own, if desired add a picture and the result achieved.

Revolution Slider as the best animation tool for WooCommerce themes

Sliders continue to dominate as one of the most popular functional and decorative elements WordPress-sites. In this situation it is not surprising that there is a sufficient number of good plugins for sliders by WordPress. One of the best plugins for CSS animations for WooCommerce theme is Revolution Slider.

Revolution Slider is the product of ThemePunch, which develops high-quality WooCommerce themes and plugins. The first release of the plugin July of 2012 and since then the Revolution Slider went through many upgrades and updates, which suggests that the developers are trying to improve their product, guided by the needs of the target audience using WooCommerce themes. Revolution slider for WooCommerce themes is a fully-held system that provides the ability to display images, videos and captions with a simple and modern 3D transition. Revolution Slider is entirely sympathetic and friendly to mobile devices slider, which can be used in any plane.

The features of Revolution Slider plugin for sites with WooCommerce templates:

The ability to change the size of images and thumbnails;
The ability to use jQuery CSS-animation parameter FallBack;
Unlimited layers with descriptions;
No conflicts of libraries jQuery;
The server-side plug-in can be configured as you like;
Easy to install on a site;
Easing function to create more organic CSS animations;
Support for Vimeo and Youtube services;
Full-screen videos with auto restart function;
Stop video during his rewind;
Possibility to duplicate sliders, slides and signature.

Using the main screen of the plugin after installation, we can create a new slide or change existing, or even remove the slider to duplicate it. Here there is also a crib shortcodes and useful for the preview button, which opens a pop-up slider demo settings as amended. Let's take a look at the editing screen slider. We have a lot of options available settings that can be easily applied. Section menu, decorated in the form of drop-down lists, implemented using jQuery, so the menu looks very neat. If we look at the screenshot below, we see the setup menu of individual slides. As you can see, customize the appearance of individual slide is very simple. When you edit a text layer, you also get access to a large number of built-in styles, plus the ability to edit them. The interface for adding layers - that's the best I've ever seen, testing the slider’s options. Here is an example of such a slider, where the effects are superimposed on one another. With the interface to create Sliders Revolution Slider, superimposing layers, it is very simple. As you can see there are many solutions for those who use WordPress themes and WooCommerce templates and need to apply CSS animations. If there are any questions left, use our forum and send requests to technical support for getting the detailed information.