diseño web

 CURSO CCS 3

Curso Animación, transformaciones y transiciones en CSS3

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

¿Ya usas CSS para darle la presentación a tus sitios web? Ahora aprende con este curso video2brain a transformar elementos y realizar transiciones y animaciones que se ejecutarán de forma fluida y que serán compatibles con la gran mayoría de navegadores de computadores de escritorio y de dispositivos móviles.
 
En este curso conocerás las técnicas para agregar dinamismo a tu sitio web con CSS mediante los módulos de transformaciones, transiciones y animaciones.

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

Posicionamiento WEB | Diseño Web | Hospedaje Web Linux | E-mail Marketing