CSS
Transiciones
Buscar..
Sintaxis
- transición: [propiedad de transición] [duración de transición] [función de tiempo de transición] [retardo de transición];
Parámetros
| Parámetro | Detalles |
|---|---|
| propiedad de transición | La propiedad CSS específica cuyo cambio de valor debe ser transicionado (o) all , si todas las propiedades transitables necesitan ser transicionadas. |
| duración de la transición | La duración (o período) en segundos ( s ) o milisegundos ( ms ) durante los cuales debe tener lugar la transición. |
| función de tiempo de transición | Una función que describe cómo se calculan los valores intermedios durante la transición. Los valores de uso común son ease , ease-in , ease-out ease-in-out , ease-out ease-in-out , linear , cubic-bezier() , steps() . Se puede encontrar más información sobre las diversas funciones de temporización en las especificaciones del W3C . |
| retraso de transición | La cantidad de tiempo que debe haber transcurrido antes de que se inicie la transición. Se puede especificar en segundos ( s ) o milisegundos ( ms ) |
Observaciones
Algunos navegadores antiguos solo admiten propiedades de transition prefijo de proveedor :
-
-webkit: Chrome 25-, Safari 6-, Safari & Chrome para iOS 6.1-, Android 4.3-, Blackberry Browser 7-, UC Browser 9.9- para Android. -
-moz: Firefox 15-. -
-o: Opera 11.5-, Opera Mobile 12-.
Ejemplo:
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
Taquigrafía de transición
CSS
div{
width: 150px;
height:150px;
background-color: red;
transition: background-color 1s;
}
div:hover{
background-color: green;
}
HTML
<div></div>
Este ejemplo cambiará el color de fondo cuando el div se desplace, el cambio de color de fondo durará 1 segundo.
Transición (a mano)
CSS
div {
height: 100px;
width: 100px;
border: 1px solid;
transition-property: height, width;
transition-duration: 1s, 500ms;
transition-timing-function: linear;
transition-delay: 0s, 1s;
}
div:hover {
height: 200px;
width: 200px;
}
HTML
<div></div>
- propiedad de transición : Especifica las propiedades de CSS para las que es el efecto de transición. En este caso, la div se expandirá tanto horizontal como verticalmente cuando se desplace el mouse.
- duración de transición : especifica el tiempo que tarda en completarse una transición. En el ejemplo anterior, las transiciones de altura y anchura tomarán 1 segundo y 500 milisegundos respectivamente.
- función de tiempo de transición : especifica la curva de velocidad del efecto de transición. Un valor lineal indica que la transición tendrá la misma velocidad de principio a fin.
- retardo de transición : especifica la cantidad de tiempo necesario para esperar antes de que comience el efecto de transición. En este caso, la altura comenzará la transición inmediatamente, mientras que el ancho esperará 1 segundo.
cúbico-bezier
La función cubic-bezier es una función de tiempo de transición que se utiliza a menudo para las transiciones personalizadas y suaves.
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
La función toma cuatro parámetros:
cubic-bezier(P1_x, P1_y, P2_x, P2_y)
Estos parámetros se asignarán a puntos que forman parte de una curva de Bézier :
Para CSS Bézier Curves, P0 y P3 están siempre en el mismo lugar. P0 está en (0,0) y P3 está en (1,1), lo que indica que los parámetros pasados a la función cúbico-bezier solo pueden estar entre 0 y 1.
Si pasa parámetros que no están en este intervalo, la función se establecerá por defecto en una transición linear .
Como cubic-bezier es la transición más flexible en CSS, puede traducir todas las demás funciones de tiempo de transición a funciones de cubic-bezier:
linear : cubic-bezier(0,0,1,1)
ease-in : cubic-bezier(0.42, 0.0, 1.0, 1.0)
ease-out : cubic-bezier(0.0, 0.0, 0.58, 1.0)
ease-in-out : cubic-bezier(0.42, 0.0, 0.58, 1.0)
