Exploring CSS3 Transitions And Animations with Examples – Part 3

In the first part of this tutorial series on CSS3 Transitions and Animations, we told you what CSS3 Transitions and Animations are, and in the second part we covered the CSS3 Transitions in-depth with examples. But with this 3rd consecutive tutorial, we will cover the CSS3 Animations in detail, and will also help you understand them with examples.

Animations

With CSS3 Transitions, you can change the state of an element from one to another, but you cannot get more control on the element if you add multiple states in transitions. That is where Animations come into play, where you get full control on your animated elements.

The Keyframes

In CSS3 transitons, you don’t get the flexibility to add multiple points at which an element should go through the transitional effects. But in CSS3 Animations you have @keyframes rule, which lets you set multiple points for an element to go through the applied effects. To apply the @keyframes rule in your animation, you need to mention the animation name, animation breakpoints such as 10%, 50% and 100%, and the properties that need to be animated.

Here’s how you set the @keyframes rule.

Vendor Prefixes

Just like the CSS3 Transitions, you need to add browser specific prefixes for applying the @keyframes rule. Though, the latest versions of Internet Explorer, Mozilla Firefox and Opera support the @keyframes rule, but you should still include their vendor prefixes to ensure that the animation works smoothly on their previous versions.

• For Google Chrome & Safari, use @-webkit-keyframes.
• For Mozilla Firefox, use @-moz-keyframes.
• For Opera, use @-o-keyframes.

The Moving Triangle

The animation code given above has been named as the moving triangle, which has been defined right after the @keyframes rule. As you can see, we have provided 6 different breakpoints in the code that start at 0% and goes up to 100%. The breakpoints are set at regular intervals of 20%. Moreover, instead of using 0% and 100% in the beginning and at the end, you can also use from and to. And, you can always add or remove one or more breakpoints in the animation effect.

If you notice the code precisely, you will see that the element properties that will be animated while execution of the code are listed inside each of the given breakpoints. For example; in the above show code, we have included the left and top.

You must also note that by using transitions you can only animate any individual property. For example; try moving an element from the top to bottom, for which you’ll probably keep the values for top and bottom to 0, and that won’t work at all. That’s because with animations you can only and only apply the transitional effect within a single property rather than from one property to another.

The Demo Code

Animation Name

When you define the keyframes for a particular animation effect, you need to assign a specific name to it. For this, you must use the animation-name property, which is then identified from the @keyframes rule, as the value of the respective animation property. It’s like we have named our animation effect as themovingtriangle. Once you define that, the given name is applied to the element, which you will be animating.
However, the animation-name property is not enough to execute the animation properly. Here, you should also set the value for the animation-duration property so that the user’s browser remembers how much time an animation effect should take for completion.

Animation Duration, Timing Function and Delay

After defining the animation-name property for an animation effect on a particular element, you would need to define its duration, the timing function, and the delay if required; it’s just like what we did in CSS3 Transitions. For animation-duration property, you can keep its value in seconds or milliseconds, like we did in transitions.

Then you can also set the timing function and delay for the animation effect using the animation-timing-function and animation-delay properties respectively. Here also you can keep the values similar to the transitions effect, as these properties behave just the same.

Animations Customization

With CSS3 Animations, you can play like you want to, which means you can customize the animation effect at your will, as it’s you who can easily take full control of an element’s behavior. For example; you can set the number of times an animation will run, as well as its direction in which it will be completed.

Animation-Iteration-Count

By default, an animation effect runs from its beginning to end and then it becomes standstill. However, if you would like the animation to repeat itself innumerable times, you should utilize the animation-iteration-count property. For keeping the animation-iteration-count value you can either use an integer or the keyword ‘infinite’. If you use an integer or a digit, the browsers will repeat the animation as many times as denoted by the number, however, if you use the keyword ‘infinite,’ it will make the animation to repeat itself for an indefinite period.

Animation-Direction

With the animation-direction property, you can define the direction an animation will complete in. You can set the values for the animation-direction property in four different types, which includes normal, reverse, alternate, and alternate-reverse.

Just like you would have imagined, the ‘normal’ value lets the animation to complete from the beginning to end. Similarly, the ‘reverse’ value will play the animation, but rather than starting from beginning to end, it will apply the effect from an end to the beginning, which means it will start from 100% and apply the effect while passing through its way to 0%.

Additionally, the ‘alternate’ value, that we have also used in our animation effect displayed above, will play the animation effect from 0 to 100% and then it will go backwards from 100% to 0%. However, if you can also control the number of times an animation runs both forwards and backwards, for which you can use the animation-iteration-count property. Basically, the animation-iteration-count starts at 1 taking the animation forward from 0% to 100%, then adds 1 taking the effect backward from 100% to 0%. This takes the actual animation-iteration-count to a total of 2 iterations.

Moreover, the ‘alternate’ value also reverses any defined timing-function when it takes the effect while reversing itself. For example; if you define the ‘ease-in’ for timing-function, which will take the animation effect from 0% to 100%, it then utilizes the ‘ease-out’ value while going back from 100% to 0%.

But that’s not all, by using the alternate-reverse value; you can adjoin both the alternate and reverse values, which will push the animation backwards first, and then bring it forward. To be more clear & precise, the alternate-reverse value begins at 100% and moves up to 0% and then it goes back to 100% again.

Animation-Play-State

This animation property permits an animation to be in active or paused state using any of the two keyword values namely; ‘running’ and ‘paused’. When you start a paused animation, it will continue from its present state rather than beginning from 0 again.

Animation Fill Mode

The animation-fill-mode property defines how styles are applied to an element outside the animation itself. When you use this property, it knows of the styles are to be applied before, after, or before and after an animation is in play. For this animation property you can use the four keyword values, which include none, forwards, backwards, and both.

If you would not like to apply any style to your element before or after an animation starts to play, you should keep its value as ‘none’.

With the ‘forwards’ value you can keep the styles defined from the last keyframe to play continuously and exceed the duration of the animation. However, you must also keep in mind that these styles can get affected by the values of the animation-direction and animation-iteration-count property.

The ‘backwards’ value will extend the styles within the first specified keyframe before the animation starts to play. This also includes applying those styles at any time which you may have set for an animation-delay property. Just like the forwards value, the backwards value may also get affected by the value of the animation-direction property.

At last, the ‘both’ value will apply the animation effects from both the forwards and backwards values.