Animaciones con CSS

Curso: Animaciones con CSS

avanzado
14 horas

También puedes acceder a todos los cursos con un solo pago

Sube a premium

Animaciones con CSS

Toma este curso
Animaciones con CSS

Curso: Animaciones con CSS

avanzado
+14 horas
Sube a premium

Y accede a todos los cursos con un solo pago

Animaciones con CSS

Animaciones con CSS

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

Nivel: avanzado
Fecha de lanzamiento: 30 de jun.
Duración: +14 horas
(Ver temario)
Calificación: 5.0
(Ver 31 opiniones)

* Accede a este y a todos los cursos, talleres y especialidades

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.

¿Qué aprenderás en este curso?

  • 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 previos necesitas?

Avatar

Prof. Alvaro Felipe

@alvarofelipeVer perfil

Autodidacta. Obsesionado con el emprendimiento y el desarrollo personal. Todo lo puedo en EDteam que me fortalece. EDy es mi pastor y con él nada me faltará.

Temario del curso

Introducción

  • 1.1 - Estado actual de CSS

  • 1.2 - Cambios de estados y CSS Trigers

  • 1.3 - Ejercicio CSS Triggers

  • 1.4 - Propiedades animables y no animables

  • 1.5 - Ejercicio con propiedades animables y no animables

  • 1.6 - Estado inicial de las propiedades

  • 1.7 - initial, inherit, unset, rever, currentcolor

  • 1.8 - Ejercicio Dropdown menu

Transiciones

  • 2.1 - Introduccion a las transiciones

  • 2.2 - Transiciones de varias propiedades

  • 2.3 - Evento transicioned

  • 2.4 - Transiciones de ida y vuelta

  • 2.5 - Disparadores de transiciones con pseudoclases

  • 2.6 - Disparadores de transiciones con pseudoclases en formularios

  • 2.7 - Efecto tarjeta

  • 2.8 - Menu off canvas

Animaciones (I)

  • 3.1 - Animaciones vs Transiciones

  • 3.2 - Animation name y duration

  • 3.3 - Animation timing function

  • 3.4 - Animation iteration-count y direction

  • 3.5 - Animation play-state

  • 3.6 - Animation delay y fill-mode

  • 3.7 - Shorthand animation

  • 3.8 - Reverse animation

Animaciones (II)

  • 4.1 - Animation event

  • 4.2 - Controlar animaciones CSS con Javascript

  • 4.3 - Animaciones con scroll

  • 4.4 - Cubic bezier

  • 4.5 - Ejemplos de Cubic bezier

  • 4.6 - Sprites

Transformaciones

  • 5.1 - Introducción al sistema de coordenadas

  • 5.2 - Funciones de transformación 2D

  • 5.3 - Transform origin

  • 5.4 - Orden de las transformaciones

  • 5.5 - Ejercicio reloj

  • 5.6 - Transformaciones 3D

  • 5.7 - 3D axis y perspectiva

  • 5.8 - Crear un cubo 3D

  • 5.9 - Dado 3D

Trucos y consideraciones

  • 6.1 - Debug, consideraciones y conceptos previos

  • 6.2 - Debug con Firefox

  • 6.3 - Debug con Chrome

  • 6.4 - Usar transform para animaciones

  • 6.5 - Flip card

  • 6.6 - Cubo 3D girando en su eje

  • 6.7 - Filtros CSS

  • 6.8 - Clip-path y variables CSS

Animaciones CSS y SVG

  • 7.1 - Insertar svg en mi web

  • 7.2 - Software para la creación de SVG

  • 7.3 - Estructura de un SVG

  • 7.4 - Texto y linea

  • 7.5 - Ejercicio de linea y texto

  • 7.6 - Animacion con el logo de Angular

  • 7.7 - Animando el logo de EDteam

Proyecto final (librería Open Source)

  • 8.1 - ¿Qué proyecto crearemos?

  • 8.2 - Estructura inicial del proyecto

  • 8.3 - FadeIn y FadeOut

  • 8.4 - Slide

  • 8.5 - Zoom

  • 8.6 - Bounce

  • 8.7 - Animacion de borde en boton

  • 8.8 - Documentación de la Libreria

  • 8.9 - Subir proyecto a Github

  • 8.10 - Subir proyecto a NPM

Avatar

Prof. Alvaro Felipe

@alvarofelipeVer perfil

Autodidacta. Obsesionado con el emprendimiento y el desarrollo personal. Todo lo puedo en EDteam que me fortalece. EDy es mi pastor y con él nada me faltará.

Empieza a aprender Animaciones con CSS

¿Aún no te decides? Mira una clase gratis

Mostrar precios en

Premium

$3020USD

En un solo pago anual de $360 240 USD

Gráfico de tabla

Alcanza tus metas con todos los cursos y funciones premium.

unicorn-head-smile¿Tienes un EDycupón?
  • Paga 8 meses y obtén 12

  • Todos los beneficios del plan gratis

  • Acceso completo a todo EDteam (+150 cursos)

  • Sin límite de reproducciones diarias

  • Certificado de culminación

  • 2 cursos nuevos por semana

  • Reproducción automática de clases

  • Descarga recursos adicionales de cursos

  • Clases y talleres bonus en cursos

  • Paga 8 meses y obtén 12

  • Todos los beneficios del plan gratis

  • Acceso completo a todo EDteam (+150 cursos)

  • Sin límite de reproducciones diarias

  • Certificado de culminación

  • 2 cursos nuevos por semana

  • Reproducción automática de clases

  • Descarga recursos adicionales de cursos

  • Clases y talleres bonus en cursos

  • Ver todas las características

*Los planes premium no tienen permanencia obligatoria. Cancela cuando quieras

Sólo este curso

$20USD

$360 240 USD

Gráfico de tabla

Conserva este curso de por vida y obtén un certificado con un único pago.

  • Acceso de por vida a este curso

  • Certificado de culminación

  • Red social educativa

  • Sin límite de reproducciones diarias

  • Sin anuncios

  • Guarda tus apuntes de clases

  • Reproducción automática de clases

  • Guarda el avance de tus estudios

  • Descarga los recursos de las clases

  • Acceso de por vida a este curso

  • Certificado de culminación

  • Red social educativa

  • Ver todas las características

¿Quieres regalar este curso?

31 calificaciones de los estudiantes (5.0)

Cargando Calificaciones...

Ver más opiniones