Ejemplo
Pase el ratón sobre un elemento div para cambiar gradualmente su aspecto:
document.getElementById("myDIV").style.transition = "all 2s";
Inténtalo tú mismo " Definición y Uso
La propiedad de transición es una propiedad resumida para las cuatro propiedades de transición:
transitionProperty, transitionDuration, transitionTimingFunction y transitionDelay.
Note: Siempre especifique la propiedad transitionDuration, de lo contrario la duración es 0, y la transición no tendrá ningún efecto.
Soporte del navegador
La propiedad transición es compatible en Internet Explorer 10, Firefox, Opera y Chrome.
Safari soporta una alternativa, la propiedad WebkitTransition.
Nota: la propiedad de transición no es compatible en Internet Explorer 9 y versiones anteriores.
Sintaxis
Devolver la propiedad de transición:
object .style.transition Establecer la propiedad de transición:
object .style.transition=" Valores de propiedad Valor Descripción transitionProperty Especifica el nombre de la propiedad CSS el efecto de transición es para transitionDuration Especifica cuántos segundos o milisegundos el efecto de transición necesario para completar transitionTimingFunction Especifica la curva de velocidad del efecto de transición transitionDelay Define cuando el efecto de transición se iniciará initial Establece esta propiedad a su valor por defecto. Lea acerca inicial inherit Hereda esta propiedad de su elemento padre. Lea acerca de heredar
Detalles técnicos
Valor por defecto: toda facilidad 0 0 Valor de retorno: Una cadena, que representa la propiedad de transición de un elemento Versión CSS CSS3
Páginas relacionadas
Referencia CSS: transition property
<Estilo de objeto