Posted in Web Development on January 2015Facebook Twitter Pinterest
The example below illustrates a simple animation using keyframes. Using white, black, and percentages creates a simple pulsating effect. When adding “animation” in your CSS you will need to set a variable, such as “pulse.” Be consistent because you will use that naming scheme in keyframes as well. If the pulsating effect and two colors aren’t quite enough, you can easily change the colors and percentages for variations. You will need to use -webkit to support Chrome, Safari, and Opera, which you can see in my examples.
Simple enough, right? Instead of moving an element up or down, we have the ability to rotate as well. This can be done within the keyframes by using transform and specifying how it will move. Not only can you rotate, but animations can be triggered upon hover. Hover over the example below
As for the negative side of CSS animations, this functionality isn’t supported in old browser versions. If you’re already a developer then you are well aware that Internet Explore 9 and below tend to be a fiery mess of issues for development, so animations won’t work. Nevertheless, there are workarounds to deal with browser incompatibility, so that shouldn’t detour developers from using CSS animations.