An Introduction to CSS3 Animations
There are some really nice effects which can be achieved using keyframe animations through CSS3, and generally speaking, once you understand the premise behind it, it’s relatively easy to get these animations working.
A keyframe animation is made up of the keyframe, a series of instructions which tell the browser what to render and when in the animation flow and some CSS declerations within your .css file.
Let’s look at an example which fades content in on page load.
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity:1;}
}
If you are only using two keyframes, you could also set the @keyframes animation as:
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
I generally stick with percentages as I find it easier.
All keyframe animations start with @keyframes followed by the name of your animation. This could be anything, but ideally should describe what your animation will do. In this instance, it’s called fadeIn.
Open up your keyframe animation with a set of curly braces. Within these braces, you declare your animation keyframes. In the example above, it’s a really simple effort. 0% = the start, 100% = the end. You could have 100 different keyframes in there starting from 0% through to 100% but in this instance, it’s not required.
On our starting keyframe, we’ve set the opacity to 0 which makes it transparent. Our ending frame (100%) has the opacity set to 1 which makes it opaque. So when the animation runs, it takes the element, makes it transparent and then increases the opacity of the element until it reaches the end frame, which in our case is @opacity: 1;@.
Once we’ve written our keyframe animation, the next step is to hook that animation up to our element. CSS3 gives us several different declarations which help us manipulate the animations.
As an example, let’s say we want the whole page to fade in once it’s loaded, a nifty little effect you may have seen previously. To do this, we’ll apply our keyframe animation to the body tag of our page.
body {
animation-name: fadeIn;
animation-duration: 1s;
}
These are the two basic declarations needed for what we’re doing. The first name is pretty self explanatory. You’re calling the keyframe animation you’ve just written, so this will be ‘fadeIn’.
The second declaration is ‘animation-duration’, which tells the browser how long to take between 0% & 100%. This example shows ’1s’ which is equal to 1 second, but could be anything. Speed it up to .5s for a quicker animation, or slow it down to 4s for a slower animation.
That’s all you need for a basic animation.
As mentioned though, there are several other declarations you could add into your CSS to enhance the effect.
animation-timing-function
The animation-timing-function alters the curve of the animation. There are several options that can be applied here but the default is ‘ease’ which is pretty nice anyway.
Other options include: linear, ease, ease-in, ease-out, ease-in-out & cubic-bezier(x,x,x,x) (which you can specify your own curve).
animation-delay
As the declaration suggests, this denotes when the animation will start. It accepts a time-related value in either seconds (s) or milliseconds (ms).
animation-iteration-count
This declaration denotes how many times the animation will take place. The default is _1_ so the animation will only take place once, setting a value of 10 would mean the animation looped 10 times and then stop. You could also specify ‘infinite’ as a value which means the animation would, as suggested, run infinitiely.
animation-direction
Instead of running the animation from 0% to 100%, declaring animation-direction: alternate; would run the animation from 100% to 0%.
animation-play-state
Two options are available for this decleration, ‘running’ which is the default and ‘paused’ which as suggests, pauses the animation.
animation-fill-mode
This is a hard one to describe. Generally, css animations will start and stop at the beginning & end of the keyframe animation. @animation-fill-mode@ lets the animations bleed out from these restrictions and allows the animation to continue to an extent after the keyframes have finished by retaining the values set for the 100% keyframe. The selector will accept the following values: none (default), forwards, backwards, both.
Support
Support is generally quite good for CSS animations. Firefox, Chrome, Safari & Mobile Safari all support animations as does Android 4. IE9 and below doesn’t support but are you surprised by that? IE10 will support them though. Opera, Opera Mini & Opera Mobile also lack support however Opera 12 will support.
But you can still use CSS prefixs to use animations now. Here’s our fadeIn animation using prefixes:
/* webkit browsers */
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity:1;}
}
/* Firefox */
@-moz-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity:1;}
}
/* IE */
@-ms-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity:1;}
}
/* Opera browsers */
@-o-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity:1;}
}
/* For when it’s a standard */
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity:1;}
}
body {
/* add in the animation name */
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-ms-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn;
/* We only want the animation to run for 1 second */
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}
Elsewhere
For some other cracking resources, check out Animate.css by Dan Eden, where he has kindly created a whole bunch of excellent animations and put it all on github for you to drop into your websites.
Mozilla Developer Network is also a valuable resource.
Also keep an eye on Can I Use.com which shows you the current level of browser support for animations.
Leave a Reply