css - other - inspeccionar elemento chrome teclado
Depurar la animación CSS con Chrome Devtools (4)
Última actualización 11 de enero de 2018.
El inspector de animación de Chrome DevTools tiene dos propósitos principales.
- Inspeccionar animaciones. Desea reducir la velocidad, reproducir o inspeccionar el código fuente de un grupo de animación.
- Modificando animaciones. Desea modificar las compensaciones de tiempo, retraso, duración o fotograma clave de un grupo de animación. La edición Bezier y la edición de fotogramas clave no son compatibles actualmente.
Por ejemplo, no es posible modificar el valor del método de escala de transformaciones CSS 2D en fotogramas clave. Intente ejecutar el fragmento de código a continuación:
.animates {
animation-timing-function: ease-out;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.wrapper {
position: relative;
margin-top: 10px;
}
.btn-overlay {
animation-name:grow;
-webkit-animation-name:grow;
position: absolute;
width: 50%;
top: 0;
left: 27%;
}
@keyframes grow {
0%{
transform: scale(1.0);
-moz-transform: scale(1.0);
-webkit-transform: scale(1.0);
left: 27%;
}
80% {
transform: scale(1.0);
-moz-transform: scale(1.0);
-webkit-transform: scale(1.0);
left: 27%;
}
90% {
transform: scale(1.04);
-moz-transform: scale(1.04);
-webkit-transform: scale(1.04);
left: 27.5%;
}
100%{
transform: scale(1.0);
-moz-transform: scale(1.0);
-webkit-transform: scale(1.0);
left: 27%;
}
}
.button{
background-color: #f49a22!important;/* Old browsers */
background: -moz-linear-gradient(left, #efaf00 0%, #dd5c00 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #efaf00 0%,#dd5c00 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #efaf00 0%,#dd5c00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=''#efaf00'', endColorstr=''#dd5c00'',GradientType=1 ); /* IE6-9 */
box-shadow: 0px 3px 6px rgba(156, 116, 86, 0.4);
display: inline-block;
color: white;
padding: 0 14px;
height: 30px;
border-radius: 80px!important;
font-size: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="wrapper">
<div class="animates btn-overlay">
<input type="submit" value="SIGN UP HERE!" name="subscribe" class="button">
</div>
</div>
</body>
</html>
El inspector de animaciones admite animaciones CSS, transiciones CSS y animaciones web. requestAnimationFrame animaciones de requestAnimationFrame no son compatibles actualmente.
¿Es posible ver o depurar los pasos que toma un elemento individual en una animación de transición css? Estoy trabajando con Chrome Dev Tools, pero soy bastante nuevo en eso. Busqué en Google y vi algo de la línea de tiempo, pero no encuentro las cosas paso a paso.
Mi animación comienza al 0% y va al 100%, pero parece que hay algo extraño en torno al 50%, aunque el paso del 50% no está declarado. Por eso me gustaría ver lo que está pasando.
Si es posible.
Es posible depurar transiciones y animaciones CSS con Chrome DevTools. Simplemente haga clic en este botón:
Luego, se abrirá una pestaña "Animaciones" en el panel de la Consola (puede abrirla presionando Esc si tiene DevTools enfocado; simplemente haga clic en DevTools para enfocarlo):
Después de hacer un poco de investigación, no parece que esto sea posible actualmente utilizando Chrome DevTools. Aquí hay algunos datos aleatorios de la información que he encontrado:
- A partir de marzo de 2013, no existía tal característica en DevTools de Firefox , aunque los desarrolladores de Mozilla han reconocido haber recibido solicitudes para esto .
- A partir de noviembre de 2013, Chrome DevTools no tiene las herramientas para depurar la representación de animaciones CSS .
- Chrome DevTools tiene soporte para pasar a través de las animaciones de lienzo HTML5 .
- No es posible pasar por la transición de la animación utilizando Javascript , ya que "las partes internas de la transición [no están] expuestas para Javascript".
- Por último, pero no menos importante, no hay nada que se vea de inmediato en la API de DevTools que indique que hay soporte para depurar las animaciones de CSS.
Para lo que vale, he aquí algunas sugerencias, aunque no las he probado y soy bastante ignorante sobre el tema:
Si es posible, haga una pausa en la animación modificando la propiedad
animation-play-state:.paused { -webkit-animation-play-state:paused; -moz-animation-play-state:paused; -o-animation-play-state:paused; animation-play-state:paused; }Arrastre la animación a lo largo de un período de tiempo más largo para que el comportamiento de transición sea más claro.
También está la opción de usar animaciones
<canvas>(para las que, al parecer, Chrome DevTools tiene mejor soporte de depuración) si es fundamental para la misión hacer cosas como avanzar a través de la animación.
Descarga Chrome Canary para tener acceso a la nueva función de controles de animación. Vea este video para ver cómo funciona: