miércoles, 14 de marzo de 2018

Informació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 animacionesconvierten 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

Datos técnicos:

  • Formato: .m2ts
  • Resolución: 1280x720p
  • Tamaño: 2.72 GB
  • Idioma: Español
  • Formadores: Álvaro Felipe
  • Contenido: 4 Modulos
  • Duración: X:xx horas
  • Fecha de publicación: 2018
  • Empresa: EDTeam (Escuela Digital)


- On


EmoticonEmoticon