Como hacer transiciones con css3
Video: Css3 animaciones | Transiciones fáciles en css3 con transition sin javascript
Hablar sobre las nuevas características de gran alcance en las hojas de estilo en cascada (CSS): Al vincular la :flotar pseudo-clase con la propiedad de transición CSS3, puede agregar características interactivas mancha a los objetos sin el uso de Flash, javascript, jQuery o!
Video: #45 - Las Transiciones y sus Propiedades - Curso de CSS3 desde 0
los transición propiedad en realidad tiene cuatro ajustes, que deben ser escritas en el CSS en el siguiente orden: propiedad, duración, timing-función, retrasar.
La siguiente lista describe la configuración:
Video: Transiciones CSS3 con Dreamweaver CS6
transición de propiedad: Identifica lo que alterará propiedad CSS, como el anchura o altura, como en transición de propiedad: anchura-.
duración de la transición: Establece el valor en segundos para la transición para completar, como en transición de duración: 5S-.
Video: HTML5 Transformacion y Transicion con CSS3
transición-timing-function: Especifica la curva de velocidad del efecto. Los valores se pueden ajustar para lineal, facilitar, facilidad en, Facilitarse, la facilidad de entrada-salida, o cúbico-Bezier (norte,norte,norte,norte), como en este ejemplo: transición-timing-función: lineal-, que es equivalente a cúbico-Bezier (0,0,1,1).
transición de retardo: Determina cuántos segundos transcurrirán antes de que comience el efecto, como en transición de retardo: 2S-.
En el ejemplo de código siguiente, después de un retraso de 2 segundos, una caja anaranjada cambia suavemente de más de 5 segundos de 100px a 500px de ancho cuando un visitante pasa el ratón sobre el recipiente: