3.2 KiB
| title | localeTitle |
|---|---|
| CSS3 Transitions | Transiciones CSS3 |
Transiciones CSS3
El uso de Transiciones CSS3 puede ser útil si desea que su aplicación o su página web sean más dinámicas y de buen aspecto.
De hecho, las transiciones le permiten cambiar los valores de las propiedades ( width , color , ...) de manera suave .
La propiedad de transition es una propiedad abreviada de propiedad de transition-property , transition-duration transition-timing-function , transition-timing-function transition-delay , la sintaxis es la siguiente:
transition: transition-property transition-duration transition-timing-function transition-delay
Por ejemplo :
transition: width 2s ease-in-out 1s;
Descripción de las propiedades.
transition-property
Especifique el nombre de la propiedad a la que debe aplicar una transición:
background-colorcolorwidthheightmarginborder-radius- Y así !
Por ejemplo :
transition-property: width; /* means the transition applies on the width */
transition-duration
Especifique el número de segundos o milisegundos que la transición debe tomar :
Por ejemplo :
transition-duration: 2s /* means the transition effect last 2s */
transition-timing-function
Especifique la curva de velocidad del efecto de transición. Por lo tanto, puede cambiar la velocidad de su transición a lo largo de su duración .
Aquí están los valores más utilizados:
lineareaseease-inease-outease-in-outcubic-bezier(n, n, n, n)
Por ejemplo :
transition-timing-function: linear
NB: Todos los valores anteriores son, de hecho, específicos de cubic-bezier . linear , por ejemplo, es equivalente a cubic-bezier(0.25,0.1,0.25,1)
Puedes experimentar y aprender más sobre Cubic Bezier aquí
transition-delay
Especifique en segundos o milisegundos cuando se iniciará la transición.
Por ejemplo :
transition-delay: 1s /* means wait 1s before the transition effect start */
¿Cómo usar las transiciones?
Puedes escribir una transición de dos maneras:
Usando la propiedad de taquigrafía ( transition )
div {
width: 200px;
transition: all 1s ease-in-out;
}
div:hover {
width: 300px;
}
Dar un valor a todas las propiedades de transición
div {
width: 200px;
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
NB: ambos ejemplos son equivalentes
Ejemplos
Aquí hay algunos bolígrafos simples que contienen transiciones simples: