CSS Animations
CSS Animation: CSS Animations is a technique to change the appearance and behavior of various elements in web pages. It is used to control the elements by changing their motions or display. It has two parts, one which contains the CSS properties which describe the animation of the elements and the other contains certain keyframes which indicate the animation properties of the element and the specific time intervals at which those have to occur.
The @keyframes rule: Keyframes are the foundations with the help of which CSS Animations works. They define the display of the animation at the respective stages of its whole duration. For example: In the following code, the paragraph changes its color with time. At 0% completion, it is red, at 50% completion it is of orange color and at full completion i.e. at 100%, it is brown.
Example: This example describes the CSS Animation using the @keyframe rule.
HTML
<!DOCTYPE html><html><head> <style> #gfg { animation-name: color; animation-duration: 25s; padding-top: 30px; padding-bottom: 30px; font-family: Times New Roman; } #geeks { font-size: 40px; text-align: center; font-weight: bold; color: #090; padding-bottom: 5px; } #geeks1 { font-size: 17px; font-weight: bold; text-align: center; } @keyframes color { 0% { background-color: red; } 50% { background-color: orange; } 100% { background-color: brown; } } </style></head><body> <div id="gfg"> <div id="geeks">GeeksforGeeks</div> <div id="geeks1">A computer science portal for geeks</div> </div></body></html> |
Output:
Animation Properties: There are certain animation properties given below:
animation-name: It is used to specify the name of the @keyframes describing the animation.
animation-name: animation_name;
animation-duration: It is used to specify the time duration it takes animation to complete one cycle.
Example: This example describes the CSS Animation Properties using animation-duration property.
HTML
<html><head> <style> #gfg1 { animation-name: text; animation-duration: 5s; animation-iteration-count: infinite; } #geek1 { font-size: 40px; text-align: center; font-weight: bold; color: #090; padding-bottom: 5px; } #geek2 { font-size: 17px; font-weight: bold; text-align: center; } @keyframes text { from { margin-top: 400px; } to { margin-top: 0px; } } </style></head><body> <div id="gfg1"> <div id="geek1">GeeksforGeeks</div> <div id="geek2">A computer science portal for geeks</div> </div></body></html> |
Output:
The animation will look like this:
animation-timing-function: Specifies how the animation makes transitions through keyframes. It can have the following values:
- ease: The animation starts slowly, then fast, and then finally ends slowly (this is the default)
- linear: The animation plays with the same speed from start to end
- ease-in: The animation plays with a slow start
- ease-out: The animation plays with a slow end
- ease-in-out: The animation starts and ends slowly.
Example: This example describes the CSS Animation Properties using the animation-timing-function property.
HTML
<!DOCTYPE html><html><head> <style> .geeks { font-size: 40px; text-align: center; font-weight: bold; color: #090; padding-bottom: 5px; font-family: Times New Roman; } .geeks1 { font-size: 17px; font-weight: bold; text-align: center; font-family: Times New Roman; } h2 { width: 350px; animation-name: text; animation-duration: 4s; animation-iteration-count: infinite; background-color: rgb(255, 210, 85); } #one { animation-timing-function: ease; } #two { animation-timing-function: linear; } #three { animation-timing-function: ease-in; } #four { animation-timing-function: ease-out; } #five { animation-timing-function: ease-in-out; } @keyframes text { from { margin-left: 60%; } to { margin-left: 0%; } } </style></head><body> <div class="geeks">GeeksforGeeks</div> <div class="geeks1">A computer science portal for geeks</div> <h2 id="one">This text is ease.</h2> <h2 id="two">This text is linear.</h2> <h2 id="three">This text is ease-in.</h2> <h2 id="four">This text is ease-out.</h2> <h2 id="five">This text is ease-in-out.</h2> </body></html> |
Output:
animation-delay: It is used to specify the delay when the animation starts.
Example: This example describes the CSS Animation Properties using the animation-delay property.
HTML
<!DOCTYPE html><html><head> <style> .geeks { font-size: 40px; text-align: center; font-weight: bold; color: #090; padding-bottom: 5px; font-family: Times New Roman; } .geeks1 { font-size: 17px; font-weight: bold; text-align: center; font-family: Times New Roman; } #one { animation-name: example; animation-duration: 10s; } #two { animation-name: example; animation-duration: 10s; animation-delay: 10s; } @keyframes example { from { background-color: orange; } to { background-color: white; } } </style></head><body> <div class="geeks">GeeksforGeeks</div> <div class="geeks1">A computer science portal for geeks</div> <h2 id="one">Text animation without delayed.</h2> <h2 id="two">Text animation with 10 second delay.</h2> </body></html> |
Output:
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.
Example: This example describes the CSS Animation Properties using an animation-iteration-count property.
HTML
<!DOCTYPE html><html><head> <style> .geeks { font-size: 40px; text-align: center; font-weight: bold; color: #090; padding-bottom: 5px; font-family: Times New Roman; } .geeks1 { font-size: 17px; font-weight: bold; text-align: center; font-family: Times New Roman; } #one { animation-name: example; animation-duration: 2s; animation-iteration-count: 2; } #two { animation-name: example; animation-duration: 2s; animation-iteration-count: infinite; } @keyframes example { from { background-color: orange; } to { background-color: white; } } </style></head><body> <div class="geeks">GeeksforGeeks</div> <div class="geeks1">A computer science portal for geeks</div> <h2 id="one">This text changes its color two times.</h2> <h2 id="two">This text changes its color infinite times.</h2> </body></html> |
Output:
animation-direction: Specifies the direction of the animation. It can have the following values:
- normal: The animation is played forward. This is the default value.
- reverse: The animation is played in the reverse direction i.e. backward.
- alternate: The animation is played forwards first, and then backward.
- alternate-reverse: The animation is played backward first, and then forwards.
Example: This example describes the CSS Animation Properties using the animation-direction property.
HTML
<!DOCTYPE html><html><head> <style> .geeks { font-size: 40px; text-align: center; font-weight: bold; color: #090; padding-bottom: 5px; font-family: Times New Roman; } .geeks1 { font-size: 17px; font-weight: bold; text-align: center; font-family: Times New Roman; } h2 { width: 100%; animation-name: text; animation-duration: 2s; animation-iteration-count: infinite; } #one { animation-direction: normal; } #two { animation-direction: reverse; } #three { animation-direction: alternate; } #four { animation-direction: alternate-reverse; } @keyframes text { from { margin-left: 60%; } to { margin-left: 0%; } } </style></head><body> <div class="geeks">GeeksforGeeks</div> <div class="geeks1">A computer science portal for geeks</div> <h2 id="one">This text is normal.</h2> <h2 id="two">This text is reverse.</h2> <h2 id="three">This text is alternate.</h2> <h2 id="four">This text is alternate-reverse.</h2></body></html> |
Output:
animation-fill-mode: Specifies what values are applied by the animation before and after it is executed.
- none: Animation will not apply any properties to the element before or after it is executed. This is the default value.
- forwards: The element will retain the same animation properties of the last keyframe after the animation completes.
- backwards: The element will get the properties of the first keyframe before the start of the animation.
- both: The animation will follow the rules for both forwards and backward i.e. it will get the properties defined for the initial keyframe before the start and will retain the value of the last keyframe after the completion of the animation.
Example: This example describes the CSS Animation Properties using an animation-fill-mode property.
HTML
<!DOCTYPE html><html><head> <style> .geeks { font-size: 40px; text-align: center; font-weight: bold; color: #090; padding-bottom: 5px; font-family: Times New Roman; } .geeks1 { font-size: 17px; font-weight: bold; text-align: center; font-family: Times New Roman; } h2 { width: 400px; background-color: orange; animation-name: text; animation-duration: 3s; } #one { animation-fill-mode: none; } #two { animation-fill-mode: forwards; } #three { animation-fill-mode: backwards; animation-delay: 2s; } #four { animation-fill-mode: both; animation-delay: 2s; } @keyframes text { from { margin-left: 0%; background-color: #aaaaaa; } to { margin-left: 60%; background-color: #008000; } } </style></head><body> <div class="geeks">GeeksforGeeks</div> <div class="geeks1">A computer science portal for geeks</div> <h2 id="one">none</h2> <h2 id="two">forwards</h2> <h2 id="three">backwards</h2> <h2 id="four">both</h2> </body></html> |
Output:
animation-play-state: This allows you to play/pause the animation.
Animation Shorthand Property: It is a shorthand way of implying the animation properties for a quicker code. The properties should be in the following order:
animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay]
[animation-iteration-count] [animation-direction] [animation-fill-mode]
[animation-play-state];
For example, normally the animation code would be like this:
Example: This example describes the CSS Animation Properties using an animation-play-state property, without animation shorthand property.
HTML
<!DOCTYPE html><html><head> <style> #g4g { width: 400px; height: 100px; position: relative; animation-name: GFG; animation-duration: 5s; animation-timing-function: linear; animation-delay: 1s; animation-iteration-count: infinite; animation-direction: 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> <img id="g4g" src=</body></html> |
Output:
In shorthand the above HTML code can be written as:
Example: This example describes the CSS Animation Properties using an animation-play-state property, with animation shorthand property.
HTML
<!DOCTYPE html><html><head> <style> #geeks4g { 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> <img id="geeks4g" src=</body></html> |
Output:
Supported Browsers:
- Google Chrome 43.0
- Microsoft Edge 12.0
- Firefox 16.0
- Safari 9.0
- Opera 30.0
Please Login to comment...