Transición - Trucos CSS

Tabla de contenido

La transitionpropiedad es una propiedad abreviada que se utiliza para representar hasta cuatro propiedades descriptivas relacionadas con la transición:

.example ( transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay); )

Estas propiedades de transición permiten que los elementos cambien valores durante un período específico, animando los cambios de propiedad, en lugar de que ocurran inmediatamente. Aquí hay un ejemplo simple que cambia el color de fondo de un elemento en: hover:

div ( transition: background-color 0.5s ease; background-color: red; ) div:hover ( background-color: green; )

Ese div tardará medio segundo cuando el mouse esté sobre él para cambiar de rojo a verde. Aquí hay una demostración en vivo de tal transición:

Vea la demostración de transición de lápiz de Louis Lazaris (@impressivewebs) en CodePen.

Puede especificar una propiedad particular como la que tenemos arriba, o usar un valor de "todos" para referirse a las propiedades de transición.

div ( transition: all 0.5s ease; background: red; padding: 10px; ) div:hover ( background: green; padding: 20px; )

En este ejemplo anterior, tanto el fondo como el relleno cambiarán, debido al valor "todo" especificado para la transition-propertyparte de la taquigrafía.

Puede separar conjuntos de valores por comas para hacer diferentes transiciones en diferentes propiedades:

div ( transition: background 0.2s ease, padding 0.8s linear; )

En su mayor parte, el orden de los valores no importa, a menos que se especifique un retraso. Si especifica un retraso, primero debe especificar una duración. El primer valor que el navegador reconoce como un valor de tiempo válido siempre representará la duración. Cualquier valor de tiempo válido posterior se analizará como retraso.

Algunas propiedades no se pueden cambiar porque no son propiedades animables. Consulte las especificaciones para obtener una lista completa de las propiedades que se pueden animar.

Al especificar la transición en el propio elemento, define la transición para que ocurra en ambas direcciones. Es decir, cuando se cambian los estilos (por ejemplo, al pasar el cursor sobre), las propiedades cambiarán, y cuando los estilos cambien de nuevo (por ejemplo, al mantener el cursor desactivado), cambiarán. Por ejemplo, las siguientes transiciones de demostración al pasar el mouse, pero no al pasar el mouse desactivado:

Vea el Pen zohgt de Louis Lazaris (@impressivewebs) en CodePen.

Esto sucede porque la transición se ha movido al :hoverselector de estado y no hay una transición coincidente en el selector que apunta al elemento directamente sin el :hoverestado.

Para la compatibilidad en todos los navegadores compatibles, se requieren prefijos de proveedor, con la sintaxis estándar declarada en último lugar:

.example ( -webkit-transition: background-color 500ms ease-out 1s; -moz-transition: background-color 500ms ease-out 1s; -o-transition: background-color 500ms ease-out 1s; transition: background-color 500ms ease-out 1s; )

IE10 (la primera versión estable de IE compatible transition) no requiere el -ms-prefijo.

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.