As well as transitions we can animate in CSS3 with @keyframes
. This technique gives you much more control over the animation and allows for the production of reuseable animations which you could build up into a library. As with transitions the same caveats regarding -webkit-
prefix for brevity.
A Quick Start Example
To get the ball rolling (quite literally) here is a simple example.
@-webkit-keyframes myMove { 0% { left: 0; } 100% { left: 500px; } } #ball{ -webkit-animation-name: myMove; -webkit-animation-duration: 2s; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; /* make the ball */ border-radius: 50px; background-color: #ff0000; width: 100px; height: 100px; position: absolute; }
Creating and Naming a Keyframe Animation
The @keyframe
line creates and names our animation as ‘myMove’.
Within the curly { .. }
brackets we then set the CSS properties at certain stages in the animation known as the animation selectors. These are exactly like CSS selectors but you are choosing a point in time rather than a
0% { left: 0; } 100% { left: 500px; }
Keyframe Selectors / Steps
The above has two animation selectors or steps at 0% and 100%. These will change the CSS left
property from 0, at the beginning (0%), to 500px at the end (100%). As with other CSS selectors you can set more than one property and you can also have other animation selectors at whatever percentage values you like. For example this places a bit point at 50%.
0% { left: 0; } 50%{ left: 50px; } 100% { left: 500px; }
Instead of percentages you can also use from
and to
.
from { left: 0; } to{ left: 500px; }
Assign the Animation with animation-name
Once an animation is created it needs to be assigned to an element in the animation-name
property to that of our animation ie:
#ball{ -webkit-animation-name: myMove; }
Set the length of the animation with animation-duration
The animation-name
property alone will not be enough even for a basic animation. We also need to set the duration for the animation and we do that with the animation-duration
property. The animation-duration
takes a value in seconds s
or milliseconds ms
. For example:
#ball{ -webkit-animation-name: myMove; -webkit-animation-duration: 2s; }
Triggering the Animation with events
CSS animations can be triggered by the likes of :hover
or the use of Javascript events. It is often useful not to place the hover directly on the element you want to animate, but rather on a parent element. In the revised example the
<div id="playground"> <div id="ball"></div> </div>
Notice how the <div id="ball">
is now a child of the <div id="playground">
. We can now amend our CSS as follows.
@-webkit-keyframes myMove { 0% { left: 0; } 100% { left: 500px; } } #playground{ border:1px solid #000000; position:relative; height:150px; } #ball{ border-radius: 50px; background-color: #ff0000; width: 100px; height: 100px; position: absolute; } #playground:hover #ball{ -webkit-animation-name: myMove; -webkit-animation-duration: 2000ms; -webkit-animation-timing-function: ease-in; -webkit-animation-fill-mode: forwards; }
Now <div id="ball">
will animate when <div id="playground">
is hovered over.
Tip: For a much larger set of options use Javascript to detect an event and then swap the classes applied.
Control Playback with with animation-play-state
The animation-play-state
property can be used to stop/start an animation. The values used are running
and pause
. To pause a animation via a Javascript event we could use:
document.getElementById('redBox').style.webkitAnimationPlayState = "paused"
Easing with animation-timing-function
If you have ever used a tool like Flash you will know that animations can be made more realistic by applying what are known as easing functions. Think of the way a train eases into and stops at a station. That would be an ease-out
. The way a train starts from the station slowly and speeds up is known as an ease-in
. By default CSS
animations have an ease
function applied to them so they start slowly and also slow down towards the end. The best way to understand the ease functions is to see them in action.
To change the easing function we therefore use the animation-timing-function
property ie:
-webkit-animation-timing-function:ease-in;
Repeating ourselves with animation-iteration-count
The animation-iteration-count
sets the number of times an animation should be played. Use a numeric value or set it to infinite
-webkit-animation-iteration-count:infinite;
Changing Direction with animation-direction
Setting the animation-direction
property to a value of alternate
will make the animation reverse on completion. When used with animation-iteration-count
set to infinite
you can create a seamless looping animation.
-webkit-animation-direction:alternate;
Holding things up with animation-delay
To apply a delay at the beginning of an animation use animation-delay
. The animation-delay
takes a value in seconds s
or milliseconds ms
. For example:
-webkit-animation-delay:2s;
Controlling the starting and end points with animation-fill-mode
If animation-direction
is not used then an animation with by default jump back to its start point. With animation-fill-mode
the animation can be set such that its doesn’t jump back to the start. This is done by setting animation-fill-mode
to the somewhat counter intuitive value of forwards
. What this will do is leave the last calculated keyframe in view.
-webkit-animation-fill-mode:forwards;
As animation-fill-mode
also has a setting of backwards
. This is mainly used with animation-delay
to ensure the users sees the animation in its first state whilst the delay plays out.
-webkit-animation-delay:2s -webkit-animation-fill-mode:backwards;
Finally there is a third option for animation-fill-mode
of both
which allows you to use both the forwards
and backwards
techniques on the same animation.
The animation shorthand
Finally you can put together the animation properties in a shorthand property. You can place the properties in any order the only caveat is that if both duration
and delay
are used, duration
goes first – as it is the most important.
The following:
-webkit-animation: myMove 4s 2s forwards;
is shorthand for
-webkit-animation-name: myMove; -webkit-animation-duration: 4s; -webkit-animation-delay: 2s; -webkit-animation-fill-mode: forwards;