Académique Documents
Professionnel Documents
Culture Documents
Transiciones en CSS
Las transiciones CSS permiten cambiar los valores de propiedad sin problemas (de un valor a otro),
durante un período determinado.
Nota: Si no se especifica la duración, la transición no tendrá ningún efecto, ya que el valor por
defecto es 0.
El siguiente ejemplo muestra un elemento <div> de 100px * 100px azul. El elemento <div>
también ha especificado un efecto de transición para la propiedad de ancho, con una duración de
2 segundos:
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
div:hover {
width: 300px;
}
div {
-webkit-transition: width 2s, height 4s; /* Safari */
transition: width 2s, height 4s;
}
ease - especifica un efecto de transición con un comienzo lento, luego rápido, y luego
terminar lentamente (esto es por defecto).
linear - especifica un efecto de transición con la misma velocidad de principio a fin.
ease-in - especifica un efecto de transición con un comienzo lento.
ease-out - especifica un efecto de transición con un final lento.
ease-in-out - especifica un efecto de transición con un comienzo y fin lento.
cubic-bezier(n,n,n,n) - le permite definir sus propios valores de una función
cúbica-Bezier.
El siguiente ejemplo muestra algunas de las diferentes curvas de velocidad que pueden ser
utilizados:
div {
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}
Transición + Transformación
El ejemplo siguiente también añade una transformación para el efecto de transición:
div {
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /*Safari*/
transition: width 2s, height 2s, transform 2s;
}
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
div {
transition: width 2s linear 1s;
}