HTML | Estilo DOM propiedad animationDirection

La propiedad animationDirection se usa para establecer o devolver la dirección de la animación. Esta propiedad no tendrá efecto si la animación está configurada para colocarse solo una vez.

Sintaxis:

Devuelve la propiedad animationDirection.
```
object.style.animationDirection;
```

Se utiliza para establecer la propiedad animationDirection.

object.style.animationDirection = "normal|reverse|alternate|
alternate-reverse|initial|inherit"

Valor de la propiedad: los valores de la propiedad animationDirection se enumeran a continuación:

normal: esta propiedad reproduce la animación en dirección hacia adelante. Es el valor predeterminado.
inversa: esta propiedad de animación reproduce la animación en dirección inversa.
alternativo: esta propiedad de animación reproduce la animación hacia adelante y hacia atrás en orden alternativo.
alternativo-reverso: esta propiedad de animación reproduce la animación primero hacia atrás y luego hacia adelante.
initial: esta propiedad se utiliza para establecer la propiedad animationDirection en su valor predeterminado.
heredar: esta propiedad se utiliza para heredar la propiedad animationDirection de su elemento principal.

Ejemplo 1:

Programa:

<!DOCTYPE html>
<html>
      
<head>
    <style> 
        div {
            color:green;
            font-size:70px;
            font-weight:bold;
            position: relative;
              
             /* Chrome, Safari, Opera */
            -webkit-animation: animate 3s infinite;
            animation: animate 3s infinite;
        }
          
        /* Chrome, Safari, Opera */
        @-webkit-keyframes animate {
            from {top: 0px;}
            to {top: 200px;}
        }
          
        @keyframes animate {
            from {top: 0px;}
            to {top: 200px;}
        }
    </style>
</head>
  
<body>
      
    <button onclick = "myGeeks()">
        Click Here!
    </button>
      
    <div id = "GFG">
        GeeksforGeeks
    </div>
      
    <script>
    function myGeeks() {
          
        // Code for Chrome, Safari, and Opera
        document.getElementById("GFG").style.WebkitAnimationDirection
                = "normal"; 
                  
        document.getElementById("GFG").style.animationDirection
                = "normal";
    }
    </script>
</body>
  
</html>                               

Producción:

Ejemplo 2::

Programa:

<!DOCTYPE html>
<html>
      
<head>
    <style> 
        div {
            color:green;
            font-size:70px;
            font-weight:bold;
            position: relative;
              
             /* Chrome, Safari, Opera */
            -webkit-animation: animate 3s infinite;
            animation: animate 3s infinite;
        }
          
        /* Chrome, Safari, Opera */
        @-webkit-keyframes animate {
            from {top: 0px;}
            to {top: 200px;}
        }
          
        @keyframes animate {
            from {top: 0px;}
            to {top: 200px;}
        }
    </style>
</head>
  
<body>
      
    <button onclick = "myGeeks()">
        Click Here!
    </button>
      
    <div id = "GFG">
        GeeksforGeeks
    </div>
      
    <script>
    function myGeeks() {
          
        // Code for Chrome, Safari, and Opera
        document.getElementById("GFG").style.WebkitAnimationDirection
                = "reverse"; 
                  
        document.getElementById("GFG").style.animationDirection
                = "reverse";
    }
    </script>
</body>
  
</html>                           

Producción:

Ejemplo 3:

Programa:

<!DOCTYPE html>
<html>
      
<head>
    <style> 
        div {
            color:green;
            font-size:70px;
            font-weight:bold;
            position: relative;
              
             /* Chrome, Safari, Opera */
            -webkit-animation: animate 3s infinite;
            animation: animate 3s infinite;
        }
          
        /* Chrome, Safari, Opera */
        @-webkit-keyframes animate {
            from {top: 0px;}
            to {top: 200px;}
        }
          
        @keyframes animate {
            from {top: 0px;}
            to {top: 200px;}
        }
    </style>
</head>
  
<body>
      
    <button onclick = "myGeeks()">
        Click Here!
    </button>
      
    <div id = "GFG">
        GeeksforGeeks
    </div>
      
    <script>
    function myGeeks() {
          
        // Code for Chrome, Safari, and Opera
        document.getElementById("GFG").style.WebkitAnimationDirection
                = "alternate"; 
                  
        document.getElementById("GFG").style.animationDirection
                = "alternate";
    }
    </script>
</body>
  
</html>                                

Producción:

Ejemplo 4:

Programa:

<!DOCTYPE html>
<html>
      
<head>
    <style> 
        div {
            color:green;
            font-size:70px;
            font-weight:bold;
            position: relative;
              
             /* Chrome, Safari, Opera */
            -webkit-animation: animate 3s infinite;
            animation: animate 3s infinite;
        }
          
        /* Chrome, Safari, Opera */
        @-webkit-keyframes animate {
            from {top: 0px;}
            to {top: 200px;}
        }
          
        @keyframes animate {
            from {top: 0px;}
            to {top: 200px;}
        }
    </style>
</head>
  
<body>
      
    <button onclick = "myGeeks()">
        Click Here!
    </button>
      
    <div id = "GFG">
        GeeksforGeeks
    </div>
      
    <script>
    function myGeeks() {
          
        // Code for Chrome, Safari, and Opera
        document.getElementById("GFG").style.WebkitAnimationDirection
                = "alternate-reverse"; 
                  
        document.getElementById("GFG").style.animationDirection
                = "alternate-reverse";
    }
    </script>
</body>
  
</html>                              

Producción:

Navegadores compatibles: los navegadores compatibles con la propiedad DOM animationDirection se enumeran a continuación:

Google Chrome 43.0
Firefox 16.0, 5.0Moz
Safari 9.0
Ópera 30.0

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta