Cómo revertir una animación en la salida de ratón después de que pase

Así, es posible invertir la animación en ratón, tales como:

.class{
   transform: rotate(0deg);

}
.class:hover{
   transform: rotate(360deg);
}

pero, cuando se utiliza @fotogramas de la animación, no podía llegar a trabajar, e.g:

.class{
   animation-name: out;
   animation-duration:2s;

}
.class:hover{
   animation-name: in;
   animation-duration:5s;
   animation-iteration-count:infinite;

}
@keyframe in{
    to {transform: rotate(360deg);}
}

@keyframe out{
    to {transform: rotate(0deg);}
}

¿Cuál es la solución óptima, sabiendo que no había necesidad de iteraciones y la animación en sí?

http://jsfiddle.net/khalednabil/eWzBm/

InformationsquelleAutor Khaled | 2013-05-13

7 Kommentare

  1. 53

    Yo pienso que si tienes un to, usted debe utilizar un from.
    Yo pensaría en algo como :

    @keyframe in {
        from: transform: rotate(0deg);
        to: transform: rotate(360deg);
    }
    
    @keyframe out {
        from: transform: rotate(360deg);
        to: transform: rotate(0deg);
    }

    De curso debe de haber comprobado ya, pero me pareció extraño que sólo utilice el transform de la propiedad desde CSS3 no está completamente implementado en todas partes. Tal vez funcionaría mejor con las siguientes consideraciones :

    • Chrome utiliza @-webkit-keyframes, no particuliar versión necesario
    • Safari utiliza @-webkit-keyframes desde la versión 5+
    • Firefox usa @keyframes desde la versión 16 (v5-15 se utilizaron @-moz-keyframes)
    • Ópera utiliza @-webkit-keyframes versión 15-22 (sólo v12 utilizado @-o-keyframes)
    • Internet Explorer utiliza @keyframes desde la versión 10+

    EDICIÓN :

    Se me ocurrió que el violín :

    http://jsfiddle.net/JjHNG/35/

    Utilizando el mínimo de código. Es acercarse a lo que usted esperaba ?

    • Es decir, un 10 no admite animaciones de fotogramas clave.
    • Gracias por la ayuda, estoy usando este código sólo a modo de ilustración, he editado mi pregunta y proporciona un código completo para echar un vistazo, por desgracia, la de-a no trabajar.
    • He hecho un poco de violín que funciona si quieres un look.
    • Que hace volver la transición, pero el problema es que si el ratón es antes de que termine el hover de transición tenemos este «salto». Después de algunas búsquedas, al parecer, el estado de los elementos deben de ser «persisted», de modo que podemos revertir a partir de finales de la rotación de la posición, para que «animación-fill-mode: delante;» puede ser utilizada, pero no parece funcionar.
    • Sería más fácil sin keyframes. ¿Es absolutamente necesario keyframes ?
    • Siempre es mejor verificar caniuse.com/#search=keyframe para el actual proveedor de prefijos.
    • Cuando se carga primero la aplicación, la primera animación se reproduce sin el ratón sobre el cuadrado. Es de todos modos hay que dejar que la carga inicial de la animación que ocurra?
    • El código en el que el violín no es el mismo código en la respuesta aquí. El código en el violín de las grandes obras.
    • ¿Alguien encontrar una solución a la primera animación de jugar en su propio después de actualizar? Tipo de importante.
    • Esta respuesta es en última instancia inútil si no se puede suprimir la animación jugando el primer tiempo

  2. 14

    No creo que esto se puede lograr usando sólo CSS animaciones. Estoy asumiendo que las transiciones de la CSS no cumplir su caso, porque (por ejemplo) quiere encadenar dos animaciones, el uso de múltiples paradas, iteraciones, o en alguna otra forma de explotación de la energía adicional animaciones conceda.

    No he encontrado ninguna manera de desencadenar una animación CSS específicamente en el mouse sin usar JavaScript para añadir «más» y «fuera» de las clases. Aunque puede utilizar el CSS base de la declaración de desencadenar una animación cuando el :hover extremos, que la misma animación a continuación, se ejecutará en la página de carga. El uso de «sobre» y «fuera» de las clases se puede dividir la definición en la base (carga) de la declaración y los dos animación-activación de las declaraciones.

    El CSS para esta solución sería:

    .class {
        /* base element declaration */
    }
    .class.out {
       animation-name: out;
       animation-duration:2s;
    
    }
    .class.over {
       animation-name: in;
       animation-duration:5s;
       animation-iteration-count:infinite;
    }
    @keyframes in {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    @keyframes out {
        from {
            transform: rotate(360deg);
        }
        to {
            transform: rotate(0deg);
        }
    }

    Y el uso de JavaScript (jQuery sintaxis) para enlazar las clases para los eventos:

    $(".class").hover(
        function () {
            $(this).removeClass('out').addClass('over');
        },
        function () {
            $(this).removeClass('over').addClass('out');
        }
    );
  3. 13

    Su mucho más fácil que todo eso: Simplemente transición de la misma propiedad en su elemento

    .earth { width:  0.92%;    transition: width 1s;  }
    .earth:hover { width: 50%; transition: width 1s;  }

    https://codepen.io/lafland/pen/MoEaoG

    • Sí, pero esto sólo funciona si sólo se modifica una propiedad.
    • border-color 0,3 s, color de fondo 0,3 s, color 0.3 s;
    • Woah, CSS ha recorrido un largo camino desde la última vez que hice un poco de programación web 😀
    • él está preguntando acerca de la animación !!
  4. 6

    la creación de una inversión de la animación es un poco excesivo para un problema sencillo, lo que necesitas es

    animation-direction: reverse

    sin embargo, esto no funciona en su propia causa animación spec es tan volcado de que se olvidó de agregar una forma de reiniciar la animación así que aquí está cómo hacerlo con la ayuda de js

    JS:

    let item = document.querySelector('.item')
    
    //play normal
    item.addEventListener('mouseover', () => {
      item.classList.add('active')
    })
    
    //play in reverse
    item.addEventListener('mouseout', () => {
      item.style.opacity = 0 //avoid showing the init style while switching the 'active' class
    
      item.classList.add('in-active')
      item.classList.remove('active')
    
      //force dom update
      setTimeout(() => {
        item.classList.add('active')
        item.style.opacity = ''
      }, 5)
    
      item.addEventListener('animationend', onanimationend)
    })
    
    function onanimationend() {
      item.classList.remove('active', 'in-active')
      item.removeEventListener('animationend', onanimationend)
    }

    CSS:

    @keyframes spin {
      0% {
        transform: rotateY(0deg);
      }
      100% {
        transform: rotateY(180deg);
      }
    }
    
    div {
      background: black;
      padding: 1rem;
      display: inline-block;
    }
    
    .item {
      /* because span cant be animated */
      display: block;
      color: yellow;
      font-size: 2rem;
    }
    
    .item.active {
      animation: spin 1s forwards;
      animation-timing-function: ease-in-out;
    }
    
    .item.in-active {
      animation-direction: reverse;
    }

    HTML:

    <div>
      <span class="item">ABC</span>
    </div>

  5. 1

    podemos utilizar requestAnimationFrame para restablecer la animación y la inversa es cuando el navegador pinturas en el siguiente marco.

    También uso onmouseenter y onmouseout controladores de eventos para invertir la dirección de animación

    Como por

    Cualquier rAFs en cola en sus controladores de eventos se ejecuta en el mismo
    marco. Cualquier rAFs en cola en un rAF se ejecutará en el siguiente cuadro.

    JS:

    function fn(el, isEnter) {
      el.className = "";
       requestAnimationFrame(() => {
        requestAnimationFrame(() => {
            el.className = isEnter? "in": "out";
        });
      });  
    }

    CSS:

    .in{
      animation: k 1s forwards;
    }
    
    .out{
      animation: k 1s forwards;
      animation-direction: reverse;
    }
    
    @keyframes k
    {
    from {transform: rotate(0deg);}
    to   {transform: rotate(360deg);}
    }

    HTML:

    <div style="width:100px; height:100px; background-color:red" 
      onmouseenter="fn(this, true)"
       onmouseleave="fn(this, false)"  
         ></div>

  6. 0

    Intente esto:

    @keyframe in {
    from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
    @keyframe out {
    from {
        transform: rotate(360deg);
      }
      to {
        transform: rotate(0deg);
      }
    }

    compatible con Firefox 5+, es decir, 10+, Chrome, Safari 4+, Opera 12+

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea