14 Cool CSS Animation Tools for WordPress
The modern web surfer wants something to catch her eye. But with so many cool sites and distractions on the web, it’s getting tougher to capture their attention. What’s a web-developer to do?!
Animation can help. But not just any old random animated flashy thing. Those are annoying. I’m talking about animation that works. Animation that makes your site pop without annoying your readers and slowing your site down. I’m talking about animating with CSS.
CSS animations allow transitions from one CSS style to another. They make your buttons spin and rotate. They can toggle the state of a button or switch. They can show a tool-tip. They make your pages transition in a smooth and interesting way (or maybe a wild and crazy way if that’s your taste). It can move an object across the screen. CSS animations look great and modern, and they’re easy to implement.
Here are a few good reasons:
- They’re easy. You don’t have to know scripting in order to create them.
- The browser will control the animation sequence. This means that browser tabs that are not currently visible will reduce the number of animations running, greatly speeding up performance.
Basically, animating with CSS is the simplest way to move something on the screen and add some animated flare to your site.
How to Create CSS Animations by Hand
There are several ways to create CSS animations. One way is to code them by hand using the @keyframes API.
Note: Key frames is an old term from back in the day of hand-drawn animation. Animators would create frames of action called key frames. Key frames were the primary frames of the action. Animators would then draw the individual frames that go between the key frames, filling in the gaps.
Just like old cartoons, the animation is defined with keyframes. With CSS animations, and unlike old cartoons that were drawn by hand, we tell the browser what values CSS properties need to have at given points and the browser will fill in the gaps. Walt would have loved this!
The CSS keyframe is a list of values that describe the animation. This is a block that is written in the CSS file. Anything with its curly brackets is part of the @keyframes block. Keywords such as from and to define what the animation will do. An example would be to move a character from its current position on the screen to a certain number of pixels away from that position. You can use the command translate to move the object. This takes advantage of hardware acceleration and it reduces the chance of overriding existing styles.
Let’s look at a few examples.
Transitions let you move an object from point A to point B without any points in between.
Here’s some example code from Google Developers:
It uses a CSS transition that’s set to take 500ms and will move an element 100px in both the X and Y axes.
CSS animations are usually vendor prefixed. The prefix –webkit– is used for browsers such as Chrome, Safari, Safari Mobile, Android, and Opera. Firefox and Internet Explorer do not come with prefixes. You can use one of many tools and guides available to create versions that run on these browsers specifically.
You can use JaveScript to turn the animation on or off:
The code to end the animation would look like this:
CSS animations give you more control over transitions by utilizing multiple keyframes, durations, and iterations.
This code from Google will animate the box without any user interactions, with infinite repetitions, and change multiple properties at the same time:
Thoughts on Coding by Hand
Using Tools to Create CSS Animations
Coding by hand can be difficult and time-consuming. To help with this there are some good tools available. These tools can help you create intricate motions and animations using code. You specify the effects, timing, and angles you want and they give you the code you can paste into your site. You can even modify it any way you want.
Let’s take a quick look at a few good tools.
Stylie is a free tool from Jeremy Kahn that allows you to easily set up keyframes, motion, CSS, and HTML and create your own CSS animations without having to write the code by hand. It’s an open-source graphical web app that’s powerful and easy to use.
It takes advantage of the fact that @keyframes can have any number of keyframes in an animation to build intricate motion paths. This is known as an easing curve. You can create any kind of curve you want. Doing this manually would take hours, but with Stylie it only takes a few minutes.
It’s simple to use. You set your keyframes’ timing and start drawing the path you want the object to take. You can have as many keyframes and paths as you want. When you’re done you can save it or choose Export, select CSS, and copy the code.
I created a path in just a few seconds. A ball follows the path at the speed that I set for each keyframe. This means that each line in the path can have a different speed. It generated a pretty large bit of code for me. This code can be created by hand, but really, why would you want to? Not bad for a free tool. It easy to see why a tool like this is helpful for complex animations and paths.
Also, you can go back and modify the code if you’ve saved it. If you want to make modifications to the code it gives you then you don’t have to start from scratch because the complex code is already generated for you. The author provides a nice tutorial to step you through creating some fancy angles.
This one is an app from Daniel Eden that’s free to use. It has 75 animations to choose from. You can download the app from the page or from GitHub. You can see the animations on the page itself. When you select the animation or hit the button, the logo will perform the animation so you’ll know what you’re getting. Effects include bounce, flash, pulse, rubber band, shake, swing, tada, wobble, jello, rotate, flip, slide, zoom, hinge, and more.
To use it, place the stylesheet in your document’s header file, add the class animated to the element you want to animate, and add the class you want from the 75 choices. You can also include the class infinite for an infinite loop.
Here’s an example from the GitHub page:
</pre> <h1 class="animated infinite bounce">Example</h1> <pre>
That’s all you need to get this to work. You can do more with it by combining it with JQuery or adding your own CSS rules.
This one has some of the most interesting effects that includes outlining, colors, width, opacity, height, shadow, border, font size, radius, indent, spacing, padding, and lots more. There are 39 effects to choose from. To use them simply include a stylesheet, add a class to the element you want to animate, and specify which animations to use.
This one does modal, position modals, buttons, list items, scroll items, transitions, on screen navigation, captions, tool-tips, form elements, and tabs with all of the effects that you expect for each. It’s still a work in progress. Like the other libraries, to use them you include a stylesheet, add a class to the element you want to animate, and specify which animations to use.
This one does open, swing, vanish, twist, perspective, rotate, slide, and more. It has 65 effects in all. This is another library that you include a stylesheet, add a class to the element you want to animate, and specify which animations to use.
This one has native and custom functions for webkit. It lets you try them out and provides you the CSS that you can copy and paste into your code. Simple and totally nifty.
This one has plenty of smooth transitions that look amazing. They’re used like other libraries where you include a stylesheet, add a class to the element you want to animate, and specify which animations to use. But if you’ll pardon the pun, this one really has some style.
This free online tool will give you code snippets from settings that you choose. It will move an object from left to right and back, adjust its width, height, and opacity. You can adjust the duration and choose between several different alignment types or create your own. Well worth checking out, in my opinion.
Using Plugins to Create CSS Animations
There are several good plugins available that do specific tasks like page transitions or button animations. These don’t require you to handle any of the code. You can still specify timing, duration, etc.
Here’s a quick look at a few that I like.
This free plugin provides an easy way to add CSS animations to pages, posts, and widgets. It has 50 entry, exit, and attention seeker animations. It can animate on scroll with a different scroll offset to each animation block. It can also animate on hover and on click. It also has special delay classes to create animation sequences in pages and posts. Animations can be disabled on mobile devices if the user wants. Users can even apply animations to widgets.
I was impressed at how easy this plugin is to use. It adds a button on your visual editor where you make all of your selections. It automatically places the content within a wrapper. Anything inside the wrapper – text, graphics, etc–gets animated. You can make changes to the code easily because it’s labeled well. The plugin is lightweight so it doesn’t put a strain on your server and there are plenty enough choices to keep your animations fresh and exciting.
This free plugin automatically adds a content slider of your last posts anywhere you want. You can choose the type of content to display, the number of slides, set auto-play mode, the timing between slides, the sort order, and more. You can also choose a graphic theme between yellow waves, dark, retro red, and silver. You can also use it to display HTML content.
It only has six settings, so it’s easy to use, and there are two ways you can use it. You can use the shortcode to place the slider in a page or post, or you can paste the supplied code into the location that you want the slider to appear in your theme.
This free plugin lets you create CSS3 animated buttons from your visual editor. You can customize the alignment, size, color, icon, animation, and more then place them within your pages and posts using shortcodes. It places a button on your visual editor so you can create the button on the fly to place within your content.
The button in the visual editor opens a window where you can create a brand new button complete with animations, text, and a URL. You just make your selections and then click to create the button. It then places the short code within a page or post. If you want to make changes you can modify the code within your content.
This free plugin uses CSS3 animation to provide a smooth transition between your pages, giving your site a more modern look. There are lots of cool effects including fade (centered, up, down, left, right), rotate, flip, and zoom. You can adjust direction and timing.
It uses a simple setup screen where you choose the type of animation, duration, and color. You can have it show the word ‘loading’ if you want. If you do show it, you can select any color you want for the font. You can also exclude a page if you want by adding “no-animation” to that link’s “a” tag.
Like its name suggests, it only animates the transition from one page to another, but it’s simple to set up, looks great, and works like a charm. It’s fun to watch it in action, too.
This is another free plugin that does CSS3 animations for page transitions. It will do animations for page in and page out, and you can set the duration for each. It will do fade (centered, up, down, left, right), rotate, flip (x and y), and zoom for both in and out.
Setting it up is very simple. You just make a few selections and you’re done. There are enough animations to give your site a modern feel without a lot of work.
This one claims to be the most complete CSS animation plugin on the market. It has over 60 animation effects that includes fade, slide, rotate, flip, bounce, rubber band, wobble, shake, swing, tada, flash, hinge, and more. It has six different settings that control duration, delay, and speed. It has event triggers that include load, click, and mouse over. There are also multiple trigger types, so the trigger can be content such as an image, button, text, or link.
It adds a button to your visual editor so you can add it to the content on any page or post. You can even preview the animation so you’ll know if it’s what you’re looking for.
This is a premium plugin. The Regular license costs $15 for use by you or one client, in a single end product that end users are not charged for. The Extended license is $75 for use by you or one client, in a single end product that end users can be charged for.
CSS animations make a site sparkle and they’re easy to implement whether you’re coding by hand, using tools to create the code for you, or using a plugin.
Have you tried CSS animations on your WordPress website? Have you used one of these tools or plugins? Do you have one to add? Tell us about your experience in the comments below.
WIN a Share of $5K
Subscribe to our blog this #hostingmonth for a chance to win one of 5 prizes of $1,000 WPMU Dev credit! Learn More.