A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Animaciones en DevTools

7/22
Recursos

Aportes 20

Preguntas 2

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Hola compa√Īeros comparto enlaces de bibliotecas de animaciones y efectos CSS:

ELEMENTS - CSS - ANIMACIONES
DevTools cuenta con una sección de animaciones para que puedas
interactuar con ella.

En firefox hay una opción que ayuda a modificar el timing-function de la animación

Ya que estamos en animación, les comparto la página para realizar en javascript: https://greensock.com/gsap/

Algunas librerias de animaciones que recomiendo por si quieres echarles un ojo ūüíö
.
Animate.css
Bounce.js
AnimeJS
GreenSock (GSAP)
Magic Animations
ZDog
CSShake
Hover.CSS
AniJS

<h3>7. Animaciones en DevTools</h3>

1:34 Accediendo a herramienta de Animaciones: Men√ļ > More tools > Animations

Enlaces de la clase:
Curso de Animaciones para la Web
Animate.css
Enlaces complementarios:
Inspeccionar animaciones
Comentarios valiosos de la comunidad: 1, 2

A seguir aprendiendo. ANIMACIONES

Inspecciona y modifica animaciones con Animation Inspector de Chrome DevTools.

inspector de animaciones

TL;DR
Captura animaciones abriendo Animation Inspector. Detecta autom√°ticamente animaciones y las organiza en grupos.
Inspecciona las animaciones reduciendo su velocidad, reproduciéndolas nuevamente o viendo su código fuente.
Modifica las animaciones cambiando su sincronización, retraso y duración o los desplazamientos de sus fotogramas claves.
Información general
Animation Inspector de Chrome DevTools tiene dos objetivos principales.

Inspeccionar animaciones: si deseas someter a reducción de velocidad, volver a reproducir o inspeccionar el código fuente de un grupo de animaciones.
Modificar animaciones: si deseas modificar la sincronización, el retraso, la duración o los desplazamientos de los fotogramas claves de una animación. La edición de curvas Bézier y de fotogramas claves no son compatibles por el momento.
Animation Inspector es compatible con animaciones de CSS, transiciones de CSS y animaciones web. Las animaciones requestAnimationFrame no son compatibles por el momento.

excelente, este apartado no lo conocía

Si cuando ingresan a animate.css y les aparece que no están habilitadas las animaciones en su sistema operativo, solo tienen que ir a Configuración de accesibilidad y Activar las animaciones.

Que super herramienta es DevTools hasta se puede manipular animaciones desde el navegador

Esto te facilita por mucho las animaciones!

S√ļper!

Que buen tip este<3

que cosa tan woaaa!!!

Animaciones min 1:48

Recuerdo que antes ten√≠as que buscar un generador de animaciones o de plano ir a W3C a buscar alg√ļn post, ahora con DevTools las haces a la medida.

Wow, esta pesta√Īa si que no la conoc√≠a, me recuerda mucho a After Effects donde tambi√©n tienes la linea del tiempo y tienes los frames donde puedes moverlos, casi no trabajo con animaciones en CSS, pero cuando lo haga empezar√© a usar esta pesta√Īa!

Aun no he tomado el curso de Animaciones pero que padre esta opción de las Dev Tools para poder modificar la animación que previamente ya creamos en CSS.
Excelente Clase!