Descripción del Curso
Aprende a hacer animaciones para la web usando sólo CSS que generen impacto (sin tener conocimientos de Javascript) . Potencia la interacción con el usuario y aumenta la usabilidad de tus proyectos. Las animaciones convierten un proyecto aburrido en uno lleno de vida y que los usuarios y clientes aman, aprende con el mejor profesor de CSS en habla hispana.



Contenido del Curso
Introducción

Cambios de estado (triggers CSS)

Propiedades animables y no animables

Estado inicial de las propiedades

Tipos de animaciones: transiciones y animaciones

Transiciones

Transition-property

Transition-duration

Transition-delay

Transition-timing-function (ease, ease in, ease out, etc)

Shorthand transition

Transformaciones

Transformaciones 2D

Rotate()

Translate()

Scale()

Skew()

Transformaciones 3D

Trucos y consideraciones

Debug de animaciones desde el browser

Trucos para mejorar el rendimiento

Propiedad will change

Animaciones con clip-path

Animaciones con filtros CSS

Animaciones con variables nativas (custom properties) de CSS

Animaciones (I)

@eyframes

animation-name

animation-duration

animation-iteration-count

animation-direction

animation-timing-function

animation-delay

animation-fill-mode

animation-play-state

Shorthand Animation

Animaciones (II)

Animation event (JavaScript)

Controlar animaciones CSS con JavaScript

Curva de la animación (cubic beizer)

Animación de sprites (steps)

Animaciones CSS y SVG

Estructura de un SVG

Exportar desde programas de ilustración (Illustrator, Gravit Designer, Inkscape, Affinity Designer)

Utilizar recursos web

Propiedades CSS para SVG

Animaciones SVG

Proyecto final (librería Open Source)

Crearemos una librería de animaciones CSS

Utilizaremos Sass para empaquetar las animaciones en mixins

Utilizaremos buenas prácticas de arquitectura CSS para evitar conflictos

Se publicará en npm para que la puedan utilizar en sus proyectos