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