NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Propiedad CSS : transition

23 de Diciembre del 2015 por Josep Antoni Bover, 1881 visitas, 0 comentarios, 0 votos.
Categorías : CSS.
La web está en segundo plano, animación en pausa.
Cargando animación...

Propiedad corta que nos permite especificar las propiedades transition-delay, transition-duration, transition-timing-function, y transition-property.

Las transiciónes se suelen utilizar para el selector :hover, aunque tambien se pueden utilizar para el selector :active.

Sintaxis

transition: transition-property transition-duration transition-timing-function transition-delay;
transition-property Especifica la propiedad que se usará en la transición. Por defecto es all.
transition-duration Especifica el tiempo que necesitara la transición para completarse en segundos(s) o milisegundos(ms). Por defecto es 0.
transition-timing-function Especifica la curva de velocidad que se usará para la transición. Por defecto es ease.
transition-delay Especifica el tiempo que tardará en arrancar la transición. Por defecto es 0.

Si deseas especificar mas de una propiedad para la transición, debes separarlas por una coma, ademas tambien tienes que especificar como minimo la duración para esa propiedad en concreto. Por ejemplo : transition:width 5s linear 0s, height 5s;.
Fijate que en el parámetro height no he especificado ni el timing-function ni el delay, por lo que tomaran los valores por defecto ease 0s.

Código de ejemplo



Compatibilidad

Esta propiedad está soportada por todos los navegadores compatibles con CSS3.

Soportado a partir de la versión 26
Soportado a partir de la versión 16
Soportado a partir de la versión 12
Soportado a partir de la versión 3 con el prefijo -webkit-
Soportado a partir de la versión 10

Documento modificado por última vez : 23/12/2015
Ejemplo modificado por última vez : 17/05/2013

Enlaces relacionados