¿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=
"https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png" 
             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 Cancelar la respuesta