Descripción de: CSS Avanzado - Animaciones
En este curso avanzado de CSS vas a aprende a crear 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 CSS Animaciones
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
Links de Descargas
Parte 1
Gracias!!!
ResponderBorrar