Aprende a Realizar Animaciones, Transformaciones y Transiciones con CSS 3

Agrega dinamismo e interactividad a tus sitios bajo estándares web

Transformaciones CSS

• Estado actual de los módulos CSS para animación
• ¿Por qué animar con CSS?
• Transformaciones CSS
• Transformación rotate()
• Transformación translate()
• Transformación scale()
• Transformación skew()
• Modificar el punto de transformación
• Múltiples transformaciones
• Transformaciones interactivas

Transiciones CSS

• Creación de transiciones CSS
• Configuración de la transición del rollout
• Efectos de easing
• Uso de curvas cubic-bezier
• Uso de transition-delay
• Uso de los prefijos propietarios
• Notación acortada
• Transiciones en etapas

Ejemplos prácticos de Tranformaciones y Transiciones

• Color y escala
• Opacidad, escala, z-index y box-shadow
• Posición

Animaciones CSS

• Animaciones CSS
• Efectos de easing
• Uso de animation-delay
• Uso de animation-iteration-count y animation-direction
• Notación acortada
• Aplicar múltiples animaciones
• Animación por porcentajes
• Uso de animation-play-state

Conclusión