How to play animation from start to end with same speed using CSS ?
The approach of this article is to learn how to play the animation has the same speed from start to end by using the animation-timing-function property in CSS. It is used to specify how the animation makes transitions through keyframes. That is, it is used to specify the motion of animation during transitions.
Syntax:
animation-timing-function: linear;
Example 1:
<!DOCTYPE html> <html> <head> <style> .geeks { font-size: 40px; text-align: center; font-weight: bold; color: white; padding-bottom: 5px; font-family: Times New Roman; } .geeks1 { font-size: 17px; font-weight: bold; text-align: center; font-family: Times New Roman; } h3 { width: 350px; animation-name: text; animation-duration: 4s; animation-iteration-count: infinite; background-color: blue; text-align: center; } #two { animation-timing-function: linear; } @keyframes text { from { margin-left: 90%; } to { margin-left: 0%; } } </style> </head> <body> <center> <div class="geeks"> GeeksforGeeks </div> <div class="geeks1"> A computer science portal for geeks </div> <h2> How to play the animation with the same speed from start to end? </h2> </center> <!-- For this animation-timing-function will be set to linear --> <h3 id="two"> Animation with same speed </h3> </body> </html> |
Output:
Example 2:
<!DOCTYPE html> <html> <head> <style> div { width: 150px; animation-name: text; animation-duration: 4s; animation-iteration-count: 2; background-color: yellow; } #two { animation-timing-function: linear; } @keyframes text { from { margin-right: 100%; } to { margin-right: 0%; } } </style> </head> <body> <center> <h2 style="color:green"> GeeksforGeeks </h2> <!-- For this animation-timing-function will be set to linear --> <div id="two"> GeeksForGeeks </div> </center> </body> </html> |
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
.png)
