Animation provides great opportunities for changing the style of an element. When transitioning, we have a set of properties with initial values that the element has before the transition begins, and end values that are set after the transition completes. Whereas during animation we can have not only two sets of values - initial and final, but also many intermediate sets of values.
Animation is based on the successive change of key frames (keyframes). Each keyframe defines one set of values for the properties to be animated. And the successive change of such keyframes will actually represent the animation.
In fact, transitions use the same model – two keyframes are also implicitly defined – the start and end, and the transition itself represents the transition from the start to the end keyframe. The only difference in animation in this case is that many intermediate keyframes can be defined for the animation.
In general, a CSS3 keyframe declaration takes the following form:
@keyframes animation_name {
from {
/* initial CSS property values */
}
to {
/* final CSS property values */
}
}
The @keyframes keyword is followed by the name of the animation. Then at least two keyframes are defined within curly braces. The block after the from keyword declares the start keyframe, and after the to keyword , the block defines the end keyframe. Within each keyframe, one or more CSS properties are defined, similar to how a normal style is created.
For example, let’s define an animation for the background color of an element:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation in CSS3</title>
<style>
@keyframes backgroundColorAnimation {
from {
background-color: red;
}
to {
background-color: blue;
}
}
div {
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
background-color: #ccc;
animation-name: backgroundColorAnimation;
animation-duration: 2s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
In this case, the animation is called backgroundColorAnimation. Animation can have an arbitrary name.
This animation provides a transition from a red background color to blue. Moreover, after the animation is completed, the color that is defined for the div element will be set.
To attach an animation to an element, the animation-name property is applied to its style . The value of this property is the name of the applied animation.
Also, using the animation-duration property, you must set the animation time in seconds or milliseconds. In this case, the animation time is 2 seconds.
With such a definition, the animation will start immediately after the page is loaded. However, you can also trigger an animation based on a user action. For example, using a style definition for a pseudo-class :hover, you can define an animation to start when the mouse pointer is over an element:
@keyframes backgroundColorAnimation {
from {
background-color: red;
}
to {
background-color: blue;
}
}
div {
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
background-color: #ccc;
}
div:hover {
animation-name: backgroundColorAnimation;
animation-duration: 2s;
}
Lots of Keyframes
As mentioned above, animation, in addition to two standard key frames, allows you to use many intermediate ones. The tween frame is determined by the percentage of the animation in which that frame should be used:
@keyframes backgroundColorAnimation {
from {
background-color: red;
}
25% {
background-color: yellow;
}
50% {
background-color: green;
}
75% {
background-color: blue;
}
to {
background-color: violet;
}
}
In this case, the animation starts with red. After 25% of the animation time, the color changes to yellow, after another 25% – to green, and so on.
You can also animate several properties at once in one keyframe:
@keyframes backgroundColorAnimation {
from {
background-color: red;
opacity: 0.2;
}
to {
background-color: blue;
opacity: 0.9;
}
}
It is also possible to define several separate animations but apply them together:
@keyframes backgroundColorAnimation {
from {
background-color: red;
}
to {
background-color: blue;
}
}
@keyframes opacityAnimation {
from {
opacity: 0.2;
}
to {
opacity: 0.9;
}
}
div {
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
background-color: #ccc;
animation-name: backgroundColorAnimation, opacityAnimation;
animation-duration: 2s, 3s;
}
Animations are listed as the value of the property animation-name, separated by commas, and the animation-durationtime of these animations is also specified for the property, separated by commas. The name of the animation and its time are matched by position, so the opacityAnimation animation will be 3 seconds long.
Animation Completion
In general, after the time interval specified by the property animation-duration ends, the animation also ends. However, with additional properties, we can override this behavior.
For example, the animation-iteration-count property determines how many times the animation will repeat. For example, 3 repetitions of the animation in a row:
animation-iteration-count: 3;
If you want the animation to run an infinite number of times, then this property is set to infinite :
animation-iteration-count: infinite;
When you repeat, the animation will start again from the starting keyframe. But using the property animation-direction: alternate; reverses the direction of the animation on repeat. That is, it will start from the end keyframe, and then there will be a transition to the start frame:
animation-name: backgroundColorAnimation, opacityAnimation; animation-duration: 2s, 2s; animation-iteration-count: 3; animation-direction: alternate;
When the animation ends, the browser sets the style of the animated element to what it would have been before the animation was applied. But the property animation-fill-mode: forwardsallows you to set exactly the one that was in the last frame as the final value of the animated property:
animation-name: backgroundColorAnimation; animation-duration: 2s; animation-iteration-count: 3; animation-direction: alternate; animation-fill-mode: forwards;
Animation Delay
Using the animation-delay property, you can define the animation delay time:
animation-name: backgroundColorAnimation; animation-duration: 5s; animation-delay: 1s;
Animation Smoothness Feature
As with transitions, you can apply all the same easing functions to animations:
- linear : linear easing function, property changes uniformly over time
- ease : an ease function where the animation speeds up towards the middle and slows down towards the end, providing a more natural change
- ease-in : ease function that only speeds up at the beginning
- ease-out : an ease function that only speeds up at the beginning
- ease-in-out : an ease function where the animation speeds up towards the middle and slows down towards the end, providing a more natural change
- cubic-bezier : cubic bezier is used for animation
The animation-timing-function property is used to set the easing function :
@keyframes backgroundColorAnimation {
from {
background-color: red;
}
to {
background-color: blue;
}
}
div {
width: 100px;
height: 100px;
margin: 40px 30px;
border: 1px solid #333;
animation-name: backgroundColorAnimation;
animation-duration: 3s;
animation-timing-function: ease-in-out;
}
Animation property
The animation property is a shorthand way of defining the above properties:
animation: animation-name animation-duration animation-timing-function animation-iteration-count animation-direction animation-delay animation-fill-mode
The first two parameters, which provide the name and time of the animation, are required. The rest of the values are
optional.
Let’s take the following set of properties:
animation-name: backgroundColorAnimation; animation-duration: 5s; animation-timing-function: ease-in-out; animation-iteration-count: 3; animation-direction: alternate; animation-delay: 1s; animation-fill-mode: forwards;
This set will be equivalent to the following animation definition:
animation: backgroundColorAnimation 5s ease-in-out 3 alternate 1s forwards;
Create an animated banner
As an example with animation, let’s create a simple animated banner:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation in CSS3</title>
<meta charset="utf-8" />
<style type="text/css">
@keyframes text1 {
10% {
opacity: 1;
}
40% {
opacity: 0;
}
}
@keyframes text2 {
30% {
opacity: 0;
}
60% {
opacity: 1;
}
}
@keyframes banner {
10% {
background-color: #008978;
}
40% {
background-color: #34495e;
}
80% {
background-color: green;
}
}
.banner {
width: 600px;
height: 120px;
background-color: #777;
margin: 0 auto;
position: relative;
}
.text1,
.text2 {
position: absolute;
width: 100%;
height: 100%;
line-height: 120px;
text-align: center;
font-size: 40px;
color: #fff;
opacity: 0;
}
.text1 {
animation: text1 6s infinite;
}
.text2 {
animation: text2 6s infinite;
}
.animated {
opacity: 0.8;
position: absolute;
width: 100%;
height: 100%;
background-color: #34495e;
animation: banner 6s infinite;
}
</style>
</head>
<body>
<div class="banner">
<div class="animated">
<div class="text1">Only this month</div>
<div class="text2">20% discounts</div>
</div>
</div>
</body>
</html>
There are three animations running at the same time. The “banner” animation changes the background color of the banner, and the text1 and text2 animations show and hide the text using transparency settings. When the first text is visible, the second is not visible and vice versa. Thus, we get the animation of the text in the banner.