La transition-propertypropiedad, que normalmente se usa como parte de la transitionabreviatura, se usa para definir a qué propiedad, o propiedades, desea aplicar un efecto de transición.
Esto se hace proporcionando el nombre de la propiedad como valor:
.example ( transition-property: color; )El valor puede ser uno de los siguientes:
- Un solo nombre de propiedad, como en el ejemplo anterior
- Una lista separada por comas de nombres de propiedades (abreviada o abreviada), para la transición de varias propiedades en un solo elemento
- La palabra clave
none, que indica que ninguna propiedad realizará la transición. - La palabra clave
all, que indica que todas las propiedades realizarán la transición (la predeterminada)
Cuando coma que separa los valores, los nombres de propiedad se asignan esencialmente a las otras propiedades de transición definidos ( transition-timing-function, transition-durationy transition-delay). Por lo tanto, esto significa que si una lista de propiedades separadas por comas incluye uno o más nombres de propiedad que no son válidos, las otras propiedades seguirán realizando la transición y se asignarán a sus propiedades de transición relacionadas previstas.
La especificación describe esto diciendo:
"Las propiedades (no) reconocidas o no animables deben mantenerse en la lista para preservar la coincidencia de los índices".
Cuando se utiliza un valor de noneo las palabras clave universales inherito initial, estos valores no se pueden utilizar como parte de una lista separada por comas; de lo contrario, se producirá un error de sintaxis y se ignorará toda la línea.
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-property: color; -moz-transition-property: color; -o-transition-property: color; transition-property: color; )IE10 (la primera versión estable de IE compatible transition-property) no requiere el -ms-prefijo.
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Trabajos | Trabajos | 4+ | 10,5+ | 10+ | 2.1+ | 3.2+ |
