¿Cómo revertir una animación con el mouse fuera después de pasar el mouse?

CSS Animations permite que varios elementos de una página web cambien gradualmente de un estilo a otro. Estos hacen que el sitio web se vea más atractivo e interesante . Invertir una animación significa reproducirla hacia atrás.

Enfoque 1: este ejemplo ilustra la inversión de una animación utilizando @keyframes from a @keyframes to y viceversa para la animación inversa.

  • Sintaxis:
    • elementSelector {
        animation-name: myanimation;
      }
      @keyframes myanimation {
      from {
             //code        
         }
      to {
            //code
        }
      }
    • element.classList.add("myclassname");
  • Programa:

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8">
        <title>animation</title>
        <style>
            h1 {
                color: green;
            }
              
            .mystyle:hover {
                background-color: aqua;
                animation-name: myanimation;
                animation-duration: 2s;
                animation-fill-mode: forwards;
            }
              
            .mystyle {
                animation-name: reverse;
                animation-duration: 1s;
            }
              
            @keyframes myanimation {
                from {
                    transform: rotate(0deg) scale(1);
                    border-radius: 0px;
                }
                to {
                    border-radius: 100px;
                    transform: rotate(360deg) scale(0.7);
                }
            }
              
            @keyframes reverse {
                from {
                    border-radius: 100px;
                    transform: rotate(360deg) scale(0.7);
                }
                to {
                    border-radius: 0px;
                    transform: rotate(0deg) scale(1);
                }
            }
        </style>
      
    </head>
      
    <body>
        <center>
            <h1>GeeksforGeeks</h1>
            <p>Animation and reverse animation</p>
            <img id="image" src=
                 alt="image" width="260" height="260" 
                 class="alignnone size-full wp-image-1477785" 
                 onmouseover="myFunction()" />
        </center>
    </body>
      
    </html>                                                                      
  • Producción:

Enfoque 2: este ejemplo ilustra el uso de la propiedad de transición para crear un efecto de animación al pasar el mouse por encima y una animación inversa al pasar el mouse por fuera.

  • Programa:

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8">
        <title>animation</title>
        <style>
            h1 {
                color: green;
            }
      
            .div1 {
                padding: 20px;
                background: green;
                border-radius: 0px;
                cursor: pointer;
                color: white;
                text-align: center;
                transition-duration: 5s;
                height: 100px;
                width: 200px;
                -webkit-transition: all 1s ease;
                -moz-transition: all 1s ease;
                -o-transition: all 1s ease;
                -ms-transition: all 1s ease;
                transition: all 1s ease;
            }
              
            .div1:hover {
                background: #ff7b29;
                border-radius: 30px;
                transform: scale(1.5);
            }
        </style>
    </head>
      
    <body>
        <center>
            <h1>GeeksforGeeks</h1>
            <p>Animation and reverse animation</p>
            <div class="div1">
                <h3>A Computer Science Portal for Geeks</h3>
            </div>
        </center>
    </body>
      
    </html>                                         
  • Producción :

Publicación traducida automáticamente

Artículo escrito por g_ragini y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *