CSS3 Efecto de transición

CSS3La función de transición permite que los cambios en los valores de las propiedades CSS ocurran de manera suave durante el tiempo especificado.

Entender CSS3Transición

Por lo general, cuando cambia el valor de una propiedad CSS, el resultado de la presentación se actualiza inmediatamente. Un ejemplo común es cambiar el color de fondo del botón al pasar el ratón por encima. Normalmente, al colocar el cursor sobre el botón, el color de fondo del botón cambia inmediatamente del valor de la propiedad antigua al nuevo valor.

CSS3Se ha introducido una nueva función de transición que le permite animar suavemente las propiedades desde un valor antiguo a un nuevo valor a lo largo del tiempo.

El siguiente ejemplo le mostrará cómobackground-colorAnimación en el botón HTML al pasar el ratón por encima.

button　{
　　　　background:　#fd7c2a;
　　　　/*　Para Safari　3.0+　*/
　　　　-webkit-transition-property: background;
　　　　-webkit-transition-duration:　2s;
　　　　
　　　　transition-property: background;
　　　　transition-duration:　2s;
}
button:hover　{
　　　　background:　#3cc16e;
}

Debe especificar al menos dos propiedades transition-property y transition-duration (mayor que 0), para que generen efectos de transición. Pero, todos los otrosPropiedades de transiciónSon opcionales, ya que sus valores predeterminados no impiden que ocurra la transición.

Ejecutar varias veces la transición

Cada propiedad de transición puede adoptar múltiples valores, separados por comas, lo que proporciona una manera sencilla de definir múltiples transiciones con diferentes configuraciones en una sola vez.

button　{
　　　　background:　#fd7c2a;
　　　　border:　3px solid #dc5801;
　　　　/*　Para Safari　3.0+　*/
　　　　-webkit-transition-property: background, border;
　　　　-webkit-transition-duration:　1s,　2s;
　　　　
　　　　transition-property: background, border;
　　　　transition-duration:　1s,　2s;
}
button:hover　{
　　　　background:　#3cc16e;
　　　　border-color:　#288049;
}

Atributo abreviado de transición

Se deben considerar muchos atributos al aplicar la transición. Pero también se puede especificar todas las propiedades de transición en una sola propiedad para acortar el código.

Las propiedades de transición son un atributo abreviado que se utiliza para establecer todas las propiedades de transición individuales en una sola declaración en el orden especificado (es decir, el atributo abreviado transition-property, transition-duration, transition-timing-function y transition-delay en el orden enumerado).

Al usar esta propiedad, asegúrese de seguir este orden de valores.

button　{
　　　　background:　#fd7c2a;
　　　　-webkit-transition:　background　2s ease-in 0s;　/*　Para Safari　3.0+　*/
　　　　transition:　background　2s ease-in 0s;　
}
button:hover　{
　　　　background:　#3cc16e;
}

CSS3Propiedades de transición

La siguiente tabla resume brevemente todas las propiedades de transición: