El CSS Value Time, <time> , representa un valor de tiempo expresado en segundos o milisegundos. Se utiliza en animación, transición y propiedades relacionadas.
Sintaxis:
<número>unidades
Valores de propiedad:
- <number>: Representa la cantidad de tiempo o duración que queremos. Puede estar precedido por un solo signo + o – .
- Unidades: Es la representación. Puede ser s , ms.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: green;
position: relative;
animation: mymove infinite;
animation-duration: 3s;/*CSS | Time */
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body>
<center><div></div></center>
</body>
</html>
Producción:
Ejemplo 2
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 20px;
background: green;
transition: width 2s, height 4s;/*CSS | Time*/
}
div:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div><p style="color:white">GeeksforGeeks</p></div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por IshwarGupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA