CSSTransiciones


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;

Transiciones Ejemplos relacionados