La propiedad de transición en CSS se usa para hacer algún efecto de transición. La transición es la combinación de cuatro propiedades que se enumeran a continuación:
- propiedad de transición
- duración de la transición
- función de temporización de transición
- transición-retraso
Nota: El efecto de transición se puede definir en dos estados (desplazamiento y activo) mediante pseudoclases como: desplazamiento o: activo o clases configuradas dinámicamente mediante JavaScript.
Sintaxis:
transition: transition-property transition-duration transition-timing-function transition-delay;
Nota: Si alguno de los valores no está definido, el navegador asume los valores predeterminados.
Valores de propiedad:
- Transition-property: Especifica las propiedades CSS a las que se debe aplicar un efecto de transición.
- transición-duración: especifica el tiempo que debe tardar en completarse una animación de transición.
- Transition-timing-function: Especifica la velocidad de transición.
- Transition-Delay: Especifica el retraso de la transición o el tiempo cuando comienza la transición.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
CSS transition Property
</title>
<style>
div {
width: 100px;
height: 270px;
background: green;
transition: width 5s ease-in .2s;
display: inline-block;
}
div:hover {
width: 300px;
}
</style>
</head>
<body style = "text-align:center;">
<h1>GeeksforGeeks</h1>
<h2>Transition Property</h2>
<div>
<p>transition-property: width</p>
<p>transition-duration: 5s</p>
<p>transition-timing-function: ease-in</p>
<p>transition-delay: .8s</p>
</div>
</body>
</html>
Producción:
- Antes del efecto de transición:
- Después del efecto de transición:
Navegadores compatibles: los navegadores compatibles con la propiedad de transición se enumeran a continuación:
- Google Chrome 26.0, 4.0 -webkit-
- Internet Explorer 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