Animaciones con CSS

Curso: Animaciones con CSS

Crea animaciones optimizadas para la web en 2D y 3D sin programar.

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.

15
Poster del curso
Avatar

Alvaro Felipe

Curso: Animaciones con CSS

Acceso a todos los cursos, talleres y especialidades de EDteam

Accede de por vida a este curso

Poster del curso
Avatar

Alvaro Felipe

Curso: Animaciones con CSS

Acceso a todos los cursos, talleres y especialidades de EDteam

Accede de por vida a este curso

¿Qué aprenderás?

  • Comprender la diferencia entre animaciones y transiciones
  • Crear transformaciones 2D y 3D
  • Optimizar animaciones CSS para mejor rendimiento
  • Crear tu propia librería de animaciones

¿Qué conocimientos necesitas?

Nivel

avanzado

+15 horas

Temario del curso

¿Eres estudiante premium o has comprado este curso? Empieza aquí

Introducción

  • 1.1 - Estado actual de CSS09:07
  • 1.2 - Cambios de estados y CSS Trigers15:41
  • 1.3 - Ejercicio CSS Triggers07:10
  • 1.4 - Propiedades animables y no animables10:03
  • 1.5 - Ejercicio con propiedades animables y no animables16:09
  • 1.6 - Estado inicial de las propiedades08:05
  • 1.7 - initial, inherit, unset, rever, currentcolor15:13
  • 1.8 - Ejercicio Dropdown menu20:48

Transiciones

  • 2.1 - Introduccion a las transiciones14:19
  • 2.2 - Transiciones de varias propiedades12:08
  • 2.3 - Evento transicioned11:41
  • 2.4 - Transiciones de ida y vuelta06:45
  • 2.5 - Disparadores de transiciones con pseudoclases12:21
  • 2.6 - Disparadores de transiciones con pseudoclases en formularios13:05
  • 2.7 - Efecto tarjeta18:17
  • 2.8 - Menu off canvas13:24

Animaciones (I)

  • 3.1 - Animaciones vs Transiciones09:47
  • 3.2 - Animation name y duration14:13
  • 3.3 - Animation timing function12:15
  • 3.4 - Animation iteration-count y direction16:59
  • 3.5 - Animation play-state10:32
  • 3.6 - Animation delay y fill-mode08:51
  • 3.7 - Shorthand animation08:19
  • 3.8 - Reverse animation19:05

Animaciones (II)

  • 4.1 - Animation event17:55
  • 4.2 - Controlar animaciones CSS con Javascript17:47
  • 4.3 - Animaciones con scroll15:38
  • 4.4 - Cubic bezier11:08
  • 4.5 - Ejemplos de Cubic bezier13:39
  • 4.6 - Sprites19:27

Transformaciones

  • 5.1 - Introducción al sistema de coordenadas07:41
  • 5.2 - Funciones de transformación 2D12:41
  • 5.3 - Transform origin10:25
  • 5.4 - Orden de las transformaciones06:53
  • 5.5 - Ejercicio reloj17:50
  • 5.6 - Transformaciones 3D17:47
  • 5.7 - 3D axis y perspectiva16:57
  • 5.8 - Crear un cubo 3D32:21
  • 5.9 - Dado 3D23:43

Trucos y consideraciones

  • 6.1 - Debug, consideraciones y conceptos previos09:12
  • 6.2 - Debug con Firefox13:30
  • 6.3 - Debug con Chrome11:21
  • 6.4 - Usar transform para animaciones08:43
  • 6.5 - Flip card15:58
  • 6.6 - Cubo 3D girando en su eje13:32
  • 6.7 - Filtros CSS15:30
  • 6.8 - Clip-path y variables CSS19:34

Animaciones CSS y SVG

  • 7.1 - Insertar svg en mi web12:49
  • 7.2 - Software para la creación de SVG23:23
  • 7.3 - Estructura de un SVG11:42
  • 7.4 - Texto y linea14:06
  • 7.5 - Ejercicio de linea y texto09:53
  • 7.6 - Animacion con el logo de Angular16:39
  • 7.7 - Animando el logo de EDteam08:06

Proyecto final (librería Open Source)

  • 8.1 - ¿Qué proyecto crearemos?13:15
  • 8.2 - Estructura inicial del proyecto06:47
  • 8.3 - FadeIn y FadeOut13:14
  • 8.4 - Slide24:16
  • 8.5 - Zoom10:02
  • 8.6 - Bounce12:20
  • 8.7 - Animacion de borde en boton06:38
  • 8.8 - Documentación de la Libreria23:13
  • 8.9 - Subir proyecto a Github06:49
  • 8.10 - Subir proyecto a NPM16:33

EDtaller Premium

  • Variables CSS (tips y trucos)46:11

¿Por qué elegir EDteam?

Profesores reales

Profesores reales

Todos nuestros profesores tienen experiencia real en aulas.Porque no basta saber un tema, sino saber enseñarlo.

Especialidades

Especialidades

Las especialidades son rutas de aprendizaje detalladas que te llevan a traves de cursos cortos a tu objetivo.

Aprende con proyectos

Aprende con proyectos

Somos la primera plataforma en incluir un proyecto del mundo real (no un examen) para completar los cursos.

Comunidad

Comunidad

No te quedes con dudas, busca apoyo en la comunidad, ayuda a tus compañeros y gana reputación.

Seguimiento de aprendizaje

Seguimiento de aprendizaje

Lleva seguimiento de tus avances, tomar notas y obtén un certificado de culminación desde nuestra plataforma.

Clases en vivo

Clases en vivo

Toda la semana tenemos clases en vivo en las que nuestros estudiantes interactuan con los profesores y sus compañeros.