Pasar al contenido principal
https://cursos.ed.team/css-animaciones?comprar
CSS Avanzado - Animaciones

CSS Avanzado - Animaciones

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.

Semana 1
Semana 2
Semana 3
Semana 4

Introducción23 oct

  • Cambios de estado (triggers CSS)
  • Propiedades animables y no animables (ver ejercicio gratis)
  • Estado inicial de las propiedades
  • Tipos de animaciones: transiciones y animaciones

Transiciones26 oct

  • Transition-property
  • Transition-duration
  • Transition-delay
  • Transition-timing-function (ease, ease in, ease out, etc)
  • Shorthand transition

Animaciones (I)30 oct

  • @eyframes
  • animation-name
  • animation-duration
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-delay
  • animation-fill-mode
  • animation-play-state

Animaciones (II)2 nov

  • Animation event (JavaScript)
  • Controlar animaciones CSS con JavaScript
  • Curva de la animación (cubic beizer)
  • Animación de sprites (steps)

Transformaciones6 nov

  • Rotate()
  • Translate()
  • Scale()
  • Skew()
  • Transformaciones 3D

Trucos y consideraciones9 nov

  • 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 CSS y SVG13 nov

  • 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)16 nov

  • 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

Muestra gratis del curso

¿Por qué estudiar en EDteam?

Clases en vivo

Vive la experiencia de un aula donde te encuentres, pues hay interacción constante con el profesor y tus compañeros.

Profesores reales

Con nosotros no te llevarás esa amarga sorpresa de que el profesor domina el tema pero no sabe explicarlo.

Preguntas y respuestas

Dentro de cada clase encontrarás una sección de preguntas y respuestas donde vamos más allá de la clase junto con los compañeros y el profesor.

Proyecto final

Comenzamos desde cero y culminamos con un proyecto del mundo real en el que aplicarás lo aprendido.

Sin pagos mensuales

Olvidate de las suscripciones. Paga solo el curso que necesites y estúdialo a tu propio ritmo.

Acceso de por vida

Tómate el tiempo que desees para aprender. Los cursos que compres son tuyos para siempre.

.
0
40
CSS Avanzado - Animaciones
Profesor

Álvaro Felipe

Comprar (Paypal)

* Precio en dólares americanos

Ver otros medios de pago

Horarios

Clases en vivo los lunes y jueves

  • 4:00 pm (CR / GT / SV )
  • 5:00 pm (MX / PE / EC / CO / PA / EST)
  • 6:00 pm (VE / BO / CU / DO )
  • 7:00 pm (CL / AR / UY / PY / BR )
  • 11:00 pm (ES)
Clases grabadas