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

#EDteamFunciona, compruébalo

#EDteamFunciona, compruébalo

Comienza este curso gratis
Comienza este curso gratis
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 Junio
Duración: +14 horas
(Ver temario)
Calificación: 4.8
(Ver 63 opiniones)

Comparte:

Acerca de este curso

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?

    ¿Qué conocimientos previos necesitas?

      ¿A quién está dirigido 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.
      Avatar

      Prof. Alvaro Felipe

      @alvaroVer perfil

      CEO de EDteam

      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 transitionend

      • 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

      @alvaroVer perfil

      CEO de EDteam

      Sigue aprendiendo con

      Mi primera página web

      Mi primera página web

      Avatar

      Beto Quiroga

      5

      4.8

      Empieza a aprender Animaciones con CSS

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

      Mostrar precios en

      Obtén cuatro meses gratis
      al adquirir un plan anual

      Por $ USD más obtén
      una suscripción anual

      Premium

      Ahorra $120 USD
      $360240USD

      El mes te sale a $30 20 USD

      Ahorra 33 %

      Ahorra 33 %

      Ahorra 33 %

      Gráfico de tabla

      Impulsa tu carrera con acceso a todos los cursos y especialidades

      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 (+169 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 (+169 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

      $30 20 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?

      63 calificaciones de los estudiantes (4.8)

      Cargando Calificaciones...

      Sigue aprendiendo con

      Mi primera página web

      Mi primera página web

      Avatar

      Beto Quiroga

      5

      4.8