css3 - para - animation css examples
¿Es posible inspeccionar los fotogramas clave de animación CSS3 con un inspector de navegador? (5)
Desde Chrome 50, ahora es posible editar los fotogramas clave CSS. https://twitter.com/ChromeDevTools/status/694966453376675840
Me encontré con algunos sitios, ahora, que aprovechan la animación de estilo de cuadros clave de CSS3 y decidí probarlos en mis propios sitios. Sin embargo, esto me lleva a un enigma: por lo general, antes de enviar un archivo CSS al sitio, utilizaré el inspector del navegador ( Ctrl+Shift+I en Chrome, Opera y FF; F12 en IE) para cambiar y cambiar el CSS localmente para ver lo que más me gusta. Sin embargo, parece que no hay forma de cambiar los fotogramas clave de una animación CSS3 con el inspector del navegador. Esto es un obstáculo extremo para mí, ya que me obliga a enviar un archivo CSS cada vez que quiero cambiar cualquier matiz de la animación, que también viene con un retraso de hasta 15 minutos desde el servidor. ¿Hay alguna manera de que pueda cambiar localmente fotogramas clave de animación CSS3 con el inspector del navegador?
Pronto lo será, a través de la línea de tiempo de Animación de Chrome Dev Tools.
Hasta ahora solo hay un video de este avance: https://www.youtube.com/watch?v=U9xfYbKxosI
Si quieres aún más control, descarga Chrome Canary (se requiere 64 bits, creo). Hay un pequeño botón de "reproducción" y un ajuste de tiempo para que pueda ralentizar la animación y pausarla cuando lo desee. ¡Muy genial!
En Chrome:
- Ctrl + Shift + I
- Elige un elemento
- columna derecha: haga clic en el enlace css (por ejemplo, style.css: 24)
- Ahora puedes editar tu archivo css
Notas:
- No puede editar css en la columna derecha y en el archivo css al mismo tiempo
- Para reactivar la animación, elimine -webkit-animation: ... y añádala de nuevo