La propiedad Transition-Delay en CSS se utiliza para especificar el tiempo de inicio de la transición. El valor de transición-retraso establecido en términos de segundos o milisegundos.
Sintaxis:
transition-delay: time|initial|inherit;
Valores de propiedad:
- time: especifica el tiempo (en segundos o milisegundos) para iniciar la animación de transición.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS transition-delay Property
</title>
<style>
div {
width: 100px;
height: 270px;
background: green;
transition-property: width;
transition-duration: 5s;
transition-delay: 2s;
/* For Safari browser */
-webkit-transition-property: width;
-webkit-transition-duration: 5s;
-webkit-transition-delay: 2s;
display: inline-block;
}
div:hover {
width: 300px;
}
</style>
</head>
<body style = "text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>Transition-delay Property</h2>
<div>
<p>transition-delay: 2s</p>
</div>
</body>
</html>
Producción:
- initial: Establece la propiedad Transition-Delay en su valor predeterminado.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS transition-delay Property
</title>
<style>
div {
width: 100px;
height: 270px;
background: green;
transition-property: width;
transition-duration: 5s;
transition-delay: initial;
/* For Safari browser */
-webkit-transition-property: width;
-webkit-transition-duration: 5s;
-webkit-transition-delay: initial;
display: inline-block;
}
div:hover {
width: 300px;
}
</style>
</head>
<body style = "text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>Transition-delay Property</h2>
<div>
<p>transition-delay: initial</p>
</div>
</body>
</html>
Producción:
- heredar: esta propiedad se hereda de su elemento padre.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS transition-delay Property
</title>
<style>
div {
width: 100px;
height: 270px;
background: green;
transition-property: width;
transition-duration: 5s;
transition-delay: inherit;
/* For Safari browser */
-webkit-transition-property: width;
-webkit-transition-duration: 5s;
-webkit-transition-delay: inherit;
display: inline-block;
}
div:hover {
width: 300px;
}
</style>
</head>
<body style = "text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>Transition-delay Property</h2>
<div>
<p>transition-delay: inherit</p>
</div>
</body>
</html>
Producción:
Nota: El valor predeterminado para la propiedad de retardo de transición es cero.
Navegadores compatibles: los navegadores compatibles con la propiedad de retardo de transición se enumeran a continuación:
- Google Chrome 26.0, 4.0 -webkit-
- Borde 10.0
- Firefox 16.0, 4.0 -moz-
- Safari 6.1, 3.1 -webkit-
- Ópera 12.1, 10.5 -o-
Publicación traducida automáticamente
Artículo escrito por DannanaManoj y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA