El enfoque de este artículo es aprender cómo reproducir la animación con la misma velocidad de principio a fin mediante el uso de la propiedad animation-timing-function en CSS. Se utiliza para especificar cómo la animación realiza transiciones a través de fotogramas clave. Es decir, se usa para especificar el movimiento de la animación durante las transiciones.
Sintaxis:
animation-timing-function: linear;
Ejemplo 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>
Producción:
Ejemplo 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>
Producción:
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA