CSS animation Property
The CSS animation property is used to specify the animation that should be applied to an element. The animation property is a shorthand for several other CSS properties that control different aspects of the animation.
Syntax:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
Property Values:
- animation-name: It is used to specify the name of the @keyframes describing the animation.
- animation-duration: It is used to specify the time duration and it takes animation to complete one cycle.
- animation-timing-function: It is used to specify how the animation makes transitions through keyframes.
- animation-delay: It is used to specify the delay when the animation starts.
- animation-iteration-count: It is used to specify the number of times the animation will repeat. It can specify as infinite to repeat the animation indefinitely.
- animation-direction: It is used to specify the direction of the animation.
- animation-fill-mode: It is used to specify what values are applied by the animation before and after it is executed.
- animation-play-state: It is used to allow you to play/pause the animation.
Example 1: The following code demonstrates the animation property using @keyframes rules.
HTML
<!DOCTYPE html> < html > < head > < title > CSS animation Property </ title > < style > h1 { color: green; } #imageID { width: 400px; height: 100px; position: relative; animation: GFG 5s linear 1s infinite alternate; } @keyframes GFG { 0% { left: 0px; top: 0px; } 25% { left: 200px; top: 200px; } 50% { left: 200px; top: 0px; } 75% { left: 0px; top: 200px; } 100% { left: 0px; top: 0px; } } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h3 >CSS animation Property</ h3 > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/w3wikiLogoHeader.png" id = "imageID" > </ body > </ html > |
Output:
Example 2: The following code demonstrates the CSS @keyframes rule with the name “circle”.
HTML
<!DOCTYPE html> < html > < head > < title > CSS animation Property </ title > < style > div { width: 200px; height: 200px; border-radius: 50%; background-color: red; animation: circle 8s infinite; } @keyframes circle { 0% { background-color: red; } 25% { background-color: yellow; } 50% { background-color: blue; } 100% { background-color: green; } } </ style > </ head > < body > < h1 style = "color:green" >w3wiki</ h1 > < h3 >CSS animation Property</ h3 > < div ></ div > </ body > </ html > |
Output:
Supported Browsers:
- Chrome 43
- Edge 12
- Firefox 16
- Opera 30
- Safari 9
Contact Us