Curso: Animaciones con CSS [EDteam]

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