CSS Animations
CSS Animations
HTML elements can be animated with CSS without the need for JavaScript!
-------ANIMATION MUKAVU-------
In this chapter you will learn about the following properties:
- @keyframes
- animation-name
- animation-duration
- animation-delay
- animation-iteration-count
- animation-direction
- animation-timing-function
- animation-fill-mode
- animation
Browser Support for Animations
The initial version of the browser that fully supports the attribute is indicated by the numbers in the table.
What are CSS Animations?
An element can progressively transition from one style to another through animation.
You are free to make as many and as many changes to CSS properties as you like.
You must first set a few keyframes for the animation in order to use CSS animation.
Keyframes contain the styles that an element will have at specific points in time.
The @keyframes Rule
At specific points in the animation, the current style will gradually give way to the new style when CSS styles are specified inside the @keyframes rule.
An animation needs to be bound to an element in order for it to function.
The “example” animation is bound to the <div> element in the example that follows. The <div> element’s background color will progressively transition from “red” to “yellow” during the course of the four-second animation:
Example
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Note: The duration of an animation is specified by the animation-duration attribute. There won’t be any animation if the animation-duration property is left empty because its default value is 0s.Â
In the example above, we have used the keywords “from” and “to” to indicate the start and end points of the style change, respectively, which is 0% and 100%.
Another option is to use %. You can apply as many style modifications as you want by using percent.
When the animation reaches 25%, 50%, and 100% completion, the <div> element’s background color will be altered as shown in the following example:
Example
/* The animation code */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
In the example that follows, the <div> element’s position and background color will change when the animation reaches 25%, 50%, and 100% completion, respectively:
Example
/* The animation code */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Delay an Animation
An animation’s start delay can be set with the animation-delay attribute.
The animation in the sample below begins two seconds later than it does.
Example
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Negative numbers are accepted as well. The animation will begin as though it has already played for N seconds if negative numbers are used.
The animation in the example below will begin as though it has already played for two seconds:
Example
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
Set How Many Times an Animation Should Run
The number of times an animation should run is specified by the animation-iteration-count property.
The animation in the example below will loop three times before ending:
Example
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
The following example uses the value “infinite” to make the animation continue for ever:
Example
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
Run Animation in Reverse Direction or Alternate Cycles
Whether an animation should be played forwards, backwards, or in alternate cycles is specified by the animation-direction parameter.
The values listed below are possible for the animation-direction property:
- normal – The animation is played as normal (forwards). This is default
- reverse – The animation is played in reverse direction (backwards)
- alternate – The animation is played forwards first, then backwards
- alternate-reverse – The animation is played backwards first, then forwards
The following example will run the animation in reverse direction (backwards):
Example
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}
The following example uses the value “alternate” to make the animation run forwards first, then backwards:
Example
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}
The following example uses the value “alternate-reverse” to make the animation run backwards first, then forwards:
Example
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
Specify the Speed Curve of the Animation
The animation’s speed curve is specified by the animation-timing-function property.
Possible values for the animation-timing-function property are as follows:
- ease – Specifies an animation with a slow start, then fast, then end slowly (this is default)
- linear – Specifies an animation with the same speed from start to end
- ease-in – Specifies an animation with a slow start
- ease-out – Specifies an animation with a slow end
- ease-in-out – Specifies an animation with a slow start and end
- cubic-bezier(n,n,n,n) – Lets you define your own values in a cubic-bezier function
The following example shows some of the different speed curves that can be used:
Example
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Specify the fill-mode For an Animation
An element is unaffected by CSS animations both before and after the first and last keyframes are played. This behavior can be overridden by the animation-fill-mode parameter.
When the animation is not playing, the animation-fill-mode property (either before, after, or both) sets the target element’s style.
The following values are possible for the animation-fill-mode property:
- none – Default value. Animation will not apply any styles to the element before or after it is executing
- forwards – The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
- backwards – The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
- both – The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
In this example, when the animation ends, the style settings from the previous keyframe are retained for the <div> element:
Example
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
The following example lets the <div> element get the style values set by the first keyframe before the animation starts (during the animation-delay period):
Example
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
The following example lets the <div> element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends:
Example
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
Animation Shorthand Property
Six of the animation properties are used in the following example:
Example
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
The same animation effect as above can be achieved by using the shorthand animation property:
Example
div {
animation: example 5s linear 2s infinite alternate;
}
CSS Animation Properties
The following table lists the @keyframes rule and all the CSS animation properties:
| Property | Description |
|---|---|
| @keyframes | Specifies the animation code |
| animation | A shorthand property for setting all the animation properties |
| animation-delay | Specifies a delay for the start of an animation |
| animation-direction | Specifies whether an animation should be played forwards, backwards or in alternate cycles |
| animation-duration | Specifies how long time an animation should take to complete one cycle |
| animation-fill-mode | Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
| animation-iteration-count | Specifies the number of times an animation should be played |
| animation-name | Specifies the name of the @keyframes animation |
| animation-play-state | Specifies whether the animation is running or paused |
| animation-timing-function | Specifies the speed curve of the animation |
