Es posible ver o de depuración de los pasos de un único elemento tiene cuando en una etapa de transición-animación css?
Estoy trabajando con Chrome Dev Tools, pero soy bastante nuevo en esto. Busqué en google y vi algo de la línea de tiempo, pero no la puedo encontrar el paso a paso de las cosas.

Mi animación empieza en el 0%, y va al 100%, pero parece ser que hay algo extraño alrededor del 50%, aunque el 50% de paso no es declarado. Es por eso que me gustaría ver lo que está pasando.

  • ¿y en lugar de preguntar «show me de google chrome dev tools’, ¿’esto es una animación que fallas. Alguna idea de por qué está sucediendo? El último es, probablemente, más effiecient en solucionar el problema 🙂
  • Bueno, yo estoy seguro de que ustedes sería capaz de solucionar esta bastante rápido, pero me gustaría saber si y cómo es posible depurar animaciones CSS, un poco como paso por paso, sólo para aprender de mí mismo. De modo que yo pueda solucionar mis propios problemas 🙂
  • Dale a un hombre un pescado y lo alimentarás por un día; enséñale a pescar y lo alimentarás para toda la vida. 😉
  • He uno para usted – if you build a man a fire, he'll be warm for a night. set a man on fire, and he'll be warm for the rest of his life. El punto es, si podemos señalar que el ‘error’ ahora, usted será menos probable que tenga el error en el futuro! 🙂
  • También, no puedo pescado 😛
  • Jeje. Bueno, gracias, pero en realidad acabo de encontrar la solución a mí mismo hace unos minutos. Tenía que ver con algunos de recálculo del centro (margen: auto) y el cambio de tamaño de un elemento. Así que con un poco de adivinanzas, de ensayo y error, he conseguido solucionar el problema. Todavía habría sido mejor si me gustaría saber cómo depurar esas cosas. Si existe una posibilidad, realmente me gustaría saber … no la encuentro a mí mismo …
  • Esta pila de enlace se describen & da alguna solución a este tema stackoverflow.com/questions/19778006/…

InformationsquelleAutor FredVDH | 2014-10-21

4 Comentarios

  1. 23

    Sí es posible.

    Es posible depurar las transiciones y animaciones CSS con Chrome DevTools. Simplemente haga clic en este botón:

    Depuración de animación CSS con Chrome Devtools

    Entonces, un «Animaciones» se abrirá la pestaña en el panel de la Consola (se puede abrir con la tecla Esc si usted tiene DevTools centrado, simplemente haga clic en DevTools para que se centre):

    Depuración de animación CSS con Chrome Devtools

    • increíble … 🙂 no sabía que este.. me salvó del infierno mucho tiempo.
    • He encontrado que por alguna razón mi versión más reciente de Chrome ya no tenía ese botón. Tuve que haga clic en el punto 3 icono en la parte superior derecha, a continuación, Más Herramientas, a continuación, seleccione Animaciones
    • El botón en el «Filtro» de la sección parece haber sido eliminado. Aún está disponible en los tres puntos de menú en la parte superior derecha debajo de «Más Herramientas» -> «Animaciones». También está disponible en los tres puntos de menú junto a la «Consola», como acaba de «Animaciones».
  2. 7

    Después de hacer un poco de investigación, que no se parece a esto es posible mediante el uso de Chrome DevTools. Aquí están algunas cositas random de la información que he encontrado:

    Para lo que vale, aquí hay algunas sugerencias, aunque no he probado estos y soy bastante ignorante sobre el tema:

    • Si es posible, pausa la animación por medio de la alteración del elemento animation-play-state propiedad:

      .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 cabo durante un largo lapso de tiempo, de modo que el comportamiento de transición es más clara.

    • También hay la opción de usar <canvas> animaciones (que al parecer Chrome DevTools tiene mejor soporte de depuración para) si es una misión crítica para hacer cosas como el paso a través de la animación.

  3. 2

    Descargar Chrome Canary para tener acceso a los nuevos controles de animación característica.
    Vea este vídeo para ver cómo funciona :

    https://vimeo.com/116038639

    • Esto no significa que usted reduzca la velocidad suficiente, y no hay ningún atajo para hacer una pausa, es completamente manejada por el mouse. Tengo una animación de error que actualmente es casi imposible de depuración sin medir el tiempo con precisión / accesos directos!!
    • Texto adicional que describe cómo funciona se puede encontrar en valhead.com/2015/01/06/quick-tip-chrome-animation-controls . También, actualmente se encuentra en regular Chrome Versión 43.0.2357.132.
    • no está disponible para ubuntu :/
  4. 0

    Última actualización 11 de enero de 2018.

    El Chrome DevTools Animación Inspector tiene dos propósitos principales.

    1. La inspección de las animaciones. Quiere frenar, repetición, o inspeccionar el
      código fuente para un grupo de animación.
    2. La modificación de las animaciones. Desea modificar la temporización de retardo,
      duración, o un fotograma clave de desplazamientos de un grupo de animación. Curva de edición
      y la edición de fotogramas clave no son compatibles actualmente.

    Para, por ejemplo, no es posible modificar el valor de CSS 2D transforma al método de escala en el fotograma clave. Intente ejecutar el fragmento de código siguiente:

    CSS:

    .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;
    }

    HTML:

    <!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>

    La Animación Inspector soporta animaciones CSS, CSS transiciones y animaciones web. requestAnimationFrame animaciones no son compatibles actualmente.

Dejar respuesta

Please enter your comment!
Please enter your name here