Modulo 1
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
Modulo 2
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)
Modulo 3
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
Modulo 4
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
https://playpaste.com/?v=Sb *Nota* No sabes Descargar? Tutorial: PASO!: Solo debes darle Click A dicho servidor Clikeado los enlaces estan dentro de un protector de enlaces. Aqui os dejo un pequeño Gift de como hacerlo.