English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La propiedad CSS de transición permite definir la transición entre dos efectos de estado para un elemento. Esto estransition-property，transition-duration，transition-timing-functionYtransition-delayAtributo abreviado
La siguiente tabla proporciona una descripción de uso y registro histórico de esta propiedad, así como la sintaxis de uso en scripts de JavaScript.
| Valor predeterminado: | all 0 ease 0; Ver todas las propiedades |
|---|---|
| Aplicable a: | Todos los elementos ::before y ::after Elementos pseudoelementos |
| Herencia: | Ninguno |
| Producción de animación posible: | No.Por favor, consulte Atributos de animación。 |
| Versión： | CSS3nueva característica |
| JavaScript sintaxis： | object.style.transition="width 2s" |
La sintaxis de este atributo es la siguiente：
transition: transition1 , transition2, ... transitionN] | initial | inherit donde transition es: [ transition-property | transition-duration | transition-timing-function | transition-delay ]
El siguiente ejemplo muestra cómo usar el atributo transition.
button {
background: #fd7c2a;
-webkit-transition-property: background 2s; /* Para Safari 3.0+ */
transition: background 2s;
}
button:hover {
background: #3cc16e;
}Prueba aquí‹/›La siguiente tabla describe los valores de esta propiedad.
| Valor | Descripción |
|---|---|
| transition-property | Especificar el nombre del atributo CSS al que se debe aplicar el efecto de transición. |
| transition-duration | Especificar los segundos o milisegundos necesarios para que finalice la animación de transición. |
| transition-timing-function | Especificar cómo calcular el valor intermedio del atributo CSS afectado por la transición. |
| transition-delay | Especificar cuándo comenzar la transición. |
| initial | Establecer este atributo en su valor predeterminado. |
| inherit | Si se especifica, el elemento asociado utiliza el valor del atributo transition del elemento padre. |
La compatibilidad del navegador del atributo transition, los números en la siguiente tabla representan la versión mínima de los navegadores que admiten esta propiedad; todos los navegadores principales admiten esta propiedad.
|
Consulte la siguiente guía：CSS3 Transiciones。
Propiedades relacionadas：transition-delay，transition-duration，transition-property，transition-timing-function。