CSS Animations
CSS allows animation of HTML elements without using JavaScript!
What are CSS Animations?
An animation lets an element gradually change from one style to another.
You can change as many CSS properties you want, as many times as you want.
To use CSS animation, you must specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.
CSS animation-name and animation-duration
The animation-name property specifies a name for the animation.
The animation-duration property defines how long an animation should take to complete. If this property is not specified, no animation will occur, because the default value is 0s (0 seconds).
CSS @keyframes Rule
When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.
To get an animation to work, you must bind the animation to an element.
The following example binds the “myAnimation” animation to the <div> element. The animation will last for 4 seconds, and it will gradually change the background-color of the <div> element from “red” to “yellow”:
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; animation-name: myAnimation; animation-duration: 4s; } @keyframes myAnimation { from {background-color: red;} to {background-color: yellow;} } </style> </head> <body> <h1>CSS Animation</h1> <div></div> <p><b>Note:</b> When an animation is finished, it goes back to its original style.</p> </body> </html> |
Result
More Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; animation-name: myAnimation; animation-duration: 4s; } @keyframes myAnimation { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} } </style> </head> <body> <h1>CSS Animation</h1> <div></div> <p><b>Note:</b> When an animation is finished, it goes back to its original style.</p> </body> </html> |
Result
Property Values
| Value | Description |
|---|---|
| animation-name | Specifies the name of the keyframe you want to bind to the selector |
| animation-duration | Specifies how many seconds or milliseconds an animation takes to complete |
| animation-timing-function | Specifies the speed curve of the animation |
| animation-delay | Specifies a delay before the animation will start |
| animation-iteration-count | Specifies how many times an animation should be played |
| animation-direction | Specifies whether or not the animation should play in reverse on alternate cycles |
| animation-fill-mode | Specifies what values are applied by the animation outside the time it is executing |
| animation-play-state | Specifies whether the animation is running or paused |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
CSS animation-name Property
Definition and Usage
The animation-name property specifies a name for the @keyframes animation.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; position: relative; animation-name: mymove; animation-duration: 5s; } @keyframes mymove { from {left: 0px;} to {left: 200px;} } </style> </head> <body> <h1>The animation-name Property</h1> <p>Specify a name for the @keyframes animation.</p> <div></div> <p><b>Note:</b> Always specify the animation-duration property. Otherwise the duration is 0, and the animation will not be played.</p> </body> </html> |
Result
Property Values
| Value | Description | |
|---|---|---|
| keyframename | Specifies the name of the keyframe you want to bind to the selector | |
| none | Default value. Specifies that there will be no animation (can be used to override animations coming from the cascade) | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
CSS animation-duration Property
Definition and Usage
The animation-duration property defines how long an animation should take to complete one cycle.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; position: relative; animation: mymove infinite; animation-duration: 3s; } @keyframes mymove { from {top: 0px;} to {top: 200px;} } </style> </head> <body> <h1>The animation-duration Property</h1> <p>Specify that the animation should complete one cycle in 3 seconds:</p> <div></div> <p><strong>Note:</strong> Always specify the animation-duration property. Otherwise the duration is 0, and the animation will not be played.</p> </body> </html> |
Result
Property Values
| Value | Description | Demo |
|---|---|---|
| time | Specifies the length of time an animation should take to complete one cycle. This can be specified in seconds or milliseconds. Default value is 0, which means that no animation will occur | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
CSS animation-iteration-count Property
Definition and Usage
The animation-iteration-count property specifies the number of times an animation should be played.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 3s; animation-iteration-count: 2; } @keyframes mymove { from {top: 0px;} to {top: 200px;} } </style> </head> <body> <h1>The animation-iteration-count Property</h1> <p>Play the animation two times:</p> <div></div> </body> </html> |
Result
Play the animation two times:
Property Values
| Value | Description | Demo |
|---|---|---|
| number | A number that defines how many times an animation should be played. Default value is 1 | |
| infinite | Specifies that the animation should be played infinite times (for ever) | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
CSS animation-direction Property
Definition and Usage
The animation-direction property defines whether an animation should be played forward, backward or in alternate cycles.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; position: relative; animation: myfirst 5s 2; animation-direction: alternate; } @keyframes myfirst { 0% {background: red; left: 0px; top: 0px;} 25% {background: yellow; left: 200px; top: 0px;} 50% {background: blue; left: 200px; top: 200px;} 75% {background: green; left: 0px; top: 200px;} 100% {background: red; left: 0px; top: 0px;} } </style> </head> <body> <h1>animation-direction: alternate</h1> <p>Play the animation forwards first, then backwards:</p> <div></div> </body> </html> |
Result
Property Values
| Value | Description | Demo |
|---|---|---|
| normal | Default value. The animation is played as normal (forwards) | |
| 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 | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
CSS animation-fill-mode Property
Definition and Usage
The animation-fill-mode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
CSS animations do not affect the element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 3s; animation-fill-mode: forwards; } @keyframes mymove { from {top: 0px;} to {top: 200px; background-color: blue;} } </style> </head> <body> <h1>animation-fill-mode: forwards</h1> <p>Let the div element retain the style values from the last keyframe when the animation ends:</p> <div></div> </body> </html> |
Result
Property Values
| Value | Description |
|---|---|
| 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 |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
CSS animation-timing-function Property
Definition and Usage
The animation-timing-function specifies the speed curve of an animation.
The speed curve defines the TIME an animation uses to change from one set of CSS styles to another.
The speed curve is used to make the changes smoothly.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 5s infinite; animation-timing-function: linear; } @keyframes mymove { from {left: 0px;} to {left: 200px;} } </style> </head> <body> <h1>The animation-timing-function Property</h1> <p>Play an animation with the same speed from beginning to end:</p> <div></div> </body> </html> |
Result
Property Values
| Value | Description | Demo |
|---|---|---|
| linear | The animation has the same speed from start to end | |
| ease | Default value. The animation has a slow start, then fast, before it ends slowly | |
| ease-in | The animation has a slow start | |
| ease-out | The animation has a slow end | |
| ease-in-out | The animation has both a slow start and a slow end | |
| step-start | Equivalent to steps(1, start) | |
| step-end | Equivalent to steps(1, end) | |
| steps(int,step-position) | Specifies a stepping function, with two parameters. The first parameter specifies the number of steps/intervals. The second parameter, specifies when the jump between values occurs | |
| cubic-bezier(n,n,n,n) | Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1 |
|
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |