La propiedad animation-duration en CSS se usa para definir cuánto tiempo debe tomar una animación para completar un ciclo. Es decir, se utiliza para especificar la duración del tiempo durante el cual se reproducirá la animación.
Sintaxis:
animation-duration: time|initial|inherit;
El valor de la propiedad:
- tiempo: este valor se utiliza para especificar el tiempo durante el cual una animación completará un ciclo. Esto se puede especificar en segundos o en milisegundos. El valor predeterminado es 0, lo que significa que no se producirá ninguna animación.
- initial: este valor se utiliza para establecer la propiedad en su valor predeterminado.
- heredar: este valor se utiliza para heredar la propiedad de su elemento principal.
Ejemplo: programa HTML para ilustrar la propiedad animation-duration en CSS.
<!DOCTYPR html>
<html>
<head>
<title>
CSS | animation-duration Property
</title>
<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>
<!-- The below div is animated for a duration of 5s
and will be played an infinite number of times -->
<div id="gfg1">
<div id="geek1">
GeeksforGeeks
</div>
<div id="geek2">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Producción:
Navegador compatible: los navegadores compatibles con la propiedad animation-duration se enumeran a continuación:
- Google Chrome 43.0
- Internet Explorer 10.0
- Firefox 16.0
- Ópera 30.0
- Safari 9.0