mozilla
Los resultados de tu búsqueda

    animation-direction

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

    Resumen

    La propiedad CSS animation-direction indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.

    Es conveniente usar la propiedad abreviada animation para ajustar todas las propiedades de animación una sola vez.

    Sintaxis

    Gramática formal: [ normal | reverse | alternate | alternate-reverse ] [, [ normal | reverse | alternate | alternate-reverse ] ]*
    
    animation-direction: normal
    animation-direction: reverse
    animation-direction: alternate
    animation-direction: alternate-reverse
    animation-direction: normal, reverse
    animation-direction: alternate, reverse, normal
    

    Valores

    normal
    Cada vez que termina un ciclo, la animación se reinicia al estado inicial y comienza desde el principio. Este es el comportamiento por defecto.
    alternate
    La animación, al terminar un ciclo, invierte su dirección. Es decir, los pasos de la animación se ejecutan al revés. Además, las funciones de tiempo también se invierten; por ejemplo una animación ease-in se convierte en una animación con ease-out cuando se reproduce al revés. El contador que determina si la iteración es par o impar comienza en uno.
    reverse
    Cada ciclo de la animación se reproduce al revés . Cada vez que comienza un ciclo de animación, ésta se posiciona en el estado final y comienza desde ahí.
    alternate-reverse
    Es similar a alternate pero la animación se reproduce al revés. Es decir la animación se posiciona en el estado final, comienza a reproducirse al reves y, cuando llega al inicio vuelve a reproducirse de forma normal hasta llegar al final de la secuencia. Y vuelve otra vez a repetirse. El contador que determina si la iteración es par o impar comienza en uno.

    Ejemplos

    Visitar animaciones CSS para ver algunos ejemplos.

    Especificaciones

    Especificación Estado Comentario
    CSS Animations Working Draft For the two new values, see the W3C discussion.

    Compatibilidad entre navegadores

    Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Soporte básico (Yes)-webkit 5.0 (5.0)-moz
    16.0 (16.0)
    10 12-o
    12.5 #
    4.0-webkit
    reverse 19 -webkit 16.0 (16.0) 10 Not supported Not supported
    alternate-reverse 19 -webkit 16.0 (16.0) 10 Not supported Not supported
    Característica Android Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Soporte básico ? (Yes)-webkit 5.0 (5.0)-moz
    16.0 (16.0)
    ? ? ?
    reverse ? (Yes)-webkit 16.0 (16.0) ? ? ?
    alternate-reverse ? (Yes)-webkit 16.0 (16.0) ? ? ?

    Consulte también

    Etiquetas y colaboradores del documento

    Contributors to this page: Luis_Calvo, jesanchez, jsalinas, teoli
    Última actualización por: teoli,