×

Descargar Cursos

Curso de CSS Avanzado Animaciones

✅ Curso de CSS Avanzado Animaciones

Descripcion 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.

Trailer del Curso

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

Enlaces de Descarga


Deja un comentario