Saltar al contenido principal
Estás usando EDteam en
USD Lima – Perú Bogotá – Colombia Cochabamba – Bolivia
Curso: Animaciones con CSS | EDteam
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.
163 calificaciones de 2.2K estudiantes José Juan Robledo Martínez 14 oct 2021
Excelente curso con variados ejemplos por clase y dónde se explica cada una de las animaciones muy a detalle. Un pequeño paso para mis estudios y un gran paso para mi futuro. :)
Gustavo Solórzano 7 ago 2018
Gracias profe, que excelente curso !!
Darwin Eleazar Quispe Landeo 27 abr 2019
Excelente curso master Alvaro FElipe!!!.
Alessandro Reina 8 dic 2018
Curso fenomenal como siempre. Muy detallado y lleno de consejos muy útiles. Realmente felicitaciones
Omar Guerrero 6 oct 2025
Trabaja mientras otros duermen
Estudia mientras otros se divierten
Persiste mientras otros descansan
Luego vivirás lo que otros solo sueñan
EDteam te ayuda a dominar la tecnología con la mejor metodología en español.
1. Introducción1.1 - Estado actual de CSS 9:07 1.2 - Cambios de estados y CSS Trigers 15:41 1.3 - Ejercicio CSS Triggers 7:10 1.4 - Propiedades animables y no animables 10:03 1.5 - Ejercicio con propiedades animables y no animables 16:09 1.6 - Estado inicial de las propiedades 8:05 1.7 - initial, inherit, unset, rever, currentcolor 15:13 1.8 - Ejercicio Dropdown menu 20:48 2. Transiciones2.1 - Introduccion a las transiciones 14:19 2.2 - Transiciones de varias propiedades 12:08 2.3 - Evento transitionend 11:41 2.4 - Transiciones de ida y vuelta 6:45 2.5 - Disparadores de transiciones con pseudoclases 12:21 2.6 - Disparadores de transiciones con pseudoclases en formularios 13:05 18:17 13:24 3. Animaciones (I)3.1 - Animaciones vs Transiciones 9:47 3.2 - Animation name y duration 14:13 3.3 - Animation timing function 12:15 3.4 - Animation iteration-count y direction 16:59 3.5 - Animation play-state 10:32 3.6 - Animation delay y fill-mode 8:51 3.7 - Shorthand animation 8:19 19:05 4. Animaciones (II)17:55 4.2 - Controlar animaciones CSS con Javascript 17:47 4.3 - Animaciones con scroll 15:38 11:08 4.5 - Ejemplos de Cubic bezier 13:39 19:27 5. Transformaciones5.1 - Introducción al sistema de coordenadas 7:41 5.2 - Funciones de transformación 2D 12:41 10:25 5.4 - Orden de las transformaciones 6:53 17:50 5.6 - Transformaciones 3D 17:47 5.7 - 3D axis y perspectiva 16:57 32:21 23:43 6. Trucos y consideraciones6.1 - Debug, consideraciones y conceptos previos 9:12 13:30 11:21 6.4 - Usar transform para animaciones 8:43 15:58 6.6 - Cubo 3D girando en su eje 13:32 15:30 6.8 - Clip-path y variables CSS 19:34 7. Animaciones CSS y SVG7.1 - Insertar svg en mi web 12:49 7.2 - Software para la creación de SVG 23:23 7.3 - Estructura de un SVG 11:42 14:06 7.5 - Ejercicio de linea y texto 9:53 7.6 - Animación con el logo de Angular 16:39 7.7 - Animando el logo de EDteam 8:06 8. Proyecto final (librería Open Source)8.1 - ¿Qué proyecto crearemos? 13:15 8.2 - Estructura inicial del proyecto 6:47 13:14 24:16 10:02 12:20 8.7 - Animación de borde en botón 6:38 8.8 - Documentación de la Libreria 23:13 8.9 - Subir proyecto a Github 6:49 8.10 - Subir proyecto a NPM 16:33 Obten acceso completo al cursoAnimaciones con CSS Desbloquea solo este curso $40 USD
Conserva este curso de por vida con un único pago. Tendrás acceso completo a todos los cursos, rutas y escuelas de EDteam *Incluye todos los beneficios por comprar el curso
Obten acceso completo al cursoAnimaciones con CSS Desbloquea solo este curso $40 USD
Conserva este curso de por vida con un único pago. Tendrás acceso completo a todos los cursos, rutas y escuelas de EDteam *Incluye todos los beneficios por comprar el curso
Crea animaciones optimizadas para la web en 2D y 3D sin programar.
¿Qué aprenderás? Propiedades que se pueden animar y cómo usarlas. Transiciones con pseudoclases y eventos. Transformaciones en 2D y 3D (como cubos y dados). Animaciones con SVG y control con JavaScript. ¿Para quién es este curso? Personas con conocimientos de CSS que quieren dominar a fondo las animaciones con CSS. Personas que quieren dominar CSS a fondo y a nivel muy avanzado. Los mejores profesores de Latinoamérica
Toma apuntes sin salir de tus clases Cursos, talleres y rutas de aprendizaje 1. Introducción1.1 - Estado actual de CSS 9:07 1.2 - Cambios de estados y CSS Trigers 15:41 1.3 - Ejercicio CSS Triggers 7:10 1.4 - Propiedades animables y no animables 10:03 1.5 - Ejercicio con propiedades animables y no animables 16:09 1.6 - Estado inicial de las propiedades 8:05 1.7 - initial, inherit, unset, rever, currentcolor 15:13 1.8 - Ejercicio Dropdown menu 20:48 2. Transiciones2.1 - Introduccion a las transiciones 14:19 2.2 - Transiciones de varias propiedades 12:08 2.3 - Evento transitionend 11:41 2.4 - Transiciones de ida y vuelta 6:45 2.5 - Disparadores de transiciones con pseudoclases 12:21 2.6 - Disparadores de transiciones con pseudoclases en formularios 13:05 18:17 13:24 3. Animaciones (I)3.1 - Animaciones vs Transiciones 9:47 3.2 - Animation name y duration 14:13 3.3 - Animation timing function 12:15 3.4 - Animation iteration-count y direction 16:59 3.5 - Animation play-state 10:32 3.6 - Animation delay y fill-mode 8:51 3.7 - Shorthand animation 8:19 19:05 4. Animaciones (II)17:55 4.2 - Controlar animaciones CSS con Javascript 17:47 4.3 - Animaciones con scroll 15:38 11:08 4.5 - Ejemplos de Cubic bezier 13:39 19:27 5. Transformaciones5.1 - Introducción al sistema de coordenadas 7:41 5.2 - Funciones de transformación 2D 12:41 10:25 5.4 - Orden de las transformaciones 6:53 17:50 5.6 - Transformaciones 3D 17:47 5.7 - 3D axis y perspectiva 16:57 32:21 23:43 6. Trucos y consideraciones6.1 - Debug, consideraciones y conceptos previos 9:12 13:30 11:21 6.4 - Usar transform para animaciones 8:43 15:58 6.6 - Cubo 3D girando en su eje 13:32 15:30 6.8 - Clip-path y variables CSS 19:34 7. Animaciones CSS y SVG7.1 - Insertar svg en mi web 12:49 7.2 - Software para la creación de SVG 23:23 7.3 - Estructura de un SVG 11:42 14:06 7.5 - Ejercicio de linea y texto 9:53 7.6 - Animación con el logo de Angular 16:39 7.7 - Animando el logo de EDteam 8:06 8. Proyecto final (librería Open Source)8.1 - ¿Qué proyecto crearemos? 13:15 8.2 - Estructura inicial del proyecto 6:47 13:14 24:16 10:02 12:20 8.7 - Animación de borde en botón 6:38 8.8 - Documentación de la Libreria 23:13 8.9 - Subir proyecto a Github 6:49 8.10 - Subir proyecto a NPM 16:33 Opciones para ver este curso $40 Obtén acceso de por vida solo a este curso
Obtén acceso a todos los cursos, rutas y escuelas de EDteam
Opciones para ver este curso $40 Obtén acceso de por vida solo a este curso
Obtén acceso a todos los cursos, rutas y escuelas de EDteam
