CSS3 Animation with @keyframes

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 HTML5 friendly browsers and vendor prefixes apply. Again these examples will use -webkit- prefix for brevity.

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 HTML element.

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%.

Assign the Animation with animation-name

Once an animation is created it needs to be assigned to an element in the HTML page. We can do this with a standard CSS selector by assigning 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:

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 HTML now appears as:

<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.

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.

Repeating ourselves with animation-iteration-count

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.

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.

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.

Recent Posts

Posted in capacity as Module Leader Group Software Development, Department of Computing Sheffield Hallam University A Morgue One hundred students, 10 clients, 5 labs of University PCs, overzealous Facilities department and the Sheffield weather. What could possibly go wrong? Last week was ‘Scrum Week’. Nineteen groups of students working flat out 9-5, Monday to Friday…

Before reading the following ensure you are happy with the flexbox concepts of main axis and cross axis discussed in my previous post. Justification on the main axis The CSS property justify-content is used to control spacing between and around items along the main axis (assuming extra space is available). It is applied to the…

The concept of ‘flexible box’ or flexbox is name of the CSS3 flex layout model. Flexbox is based around flex containers and flex items. A flex container is a parent element to flex items. Flex items are the immediate children of the flex container and can be laid out in any direction. Take the following simple…