Curso Animación, transformaciones y transiciones en CSS3
Agrega dinamismo e interactividad a tus sitios bajo estándares web
Cada capítulo se centra en un módulo específico de CSS3 donde se explica su sintaxis y se muestra su uso, adicionalmente hay un capítulo con ejemplos en un sitio web real. En la gran mayoría de ejemplos se muestra la sintaxis completa, la cual incluye los diferentes prefijos propietarios que permiten dar soporte a los diferentes navegadores.
Entre las animaciones, transiciones y transformaciones que veremos, encontramos propiedades como escala, posición, opacidad, rotación y color; controlando tiempos, aceleraciones y otros elementos que otorgan gran dinamismo a tus sitios web multipantalla.
- 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
Despedida del curso