CSS | Propiedad animation-play-state

La propiedad animation-play-state se usa para especificar si la animación se está ejecutando o está en pausa.

Sintaxis:

animation-play-state: paused|running|initial|inherit;

Valor de propiedad: la propiedad animation-play-state se enumera a continuación:

  • pausado: esta propiedad se usa para especificar que la animación está en pausa.
  • en ejecución: Es el valor por defecto. Esta propiedad se utiliza para especificar que la animación se está ejecutando.
  • initial: esta propiedad se utiliza para establecer su valor predeterminado.
  • heredar: se utiliza para heredar la propiedad de animación de su padre.

Ejemplo:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>
            CSS | animation-play-state Property
        </title>
        <style> 
            body {
                text-align:center;
                width:70%;
            }
            h1 {
                color:green;
            }
            .gfg {
                width: 50px;
                height: 50px;
                background: green;
                position: relative;
                -webkit-animation: mymove 10s;
                -webkit-animation-play-state: play;
                animation: mymove 5s;
                animation-play-state: play;
            }
            .geeks {
                width: 50px;
                height: 50px;
                background: green;
                position: relative;
                -webkit-animation: mymove 10s;
                -webkit-animation-play-state: paused;
                animation: mymove 5s;
                animation-play-state: paused;
            }
            @-webkit-keyframes mymove {
                from {
                    left: 0%;
                }
                to {
                    left: 80%;
                }
            }
                  
            @keyframes mymove {
                from {
                    left: 0%;
                }
                to {
                    left: 80%;
                }
            }
        </style> 
    </head> 
    <body> 
        <h1>GeeksforGeeks</h1> 
        <h2>animation-play-state property</h2> 
        <div class = "gfg"></div><br> 
        <div class = "geeks"></div> 
    </body> 
</html>                                                  

Producción:

Navegador compatible: los navegadores compatibles con la propiedad animation-play-state se enumeran a continuación:

  • Google Chrome 43.0
  • Internet Explorer 10.0
  • Firefox 16.0
  • Ópera 30.0
  • Safari 9.0

Publicación traducida automáticamente

Artículo escrito por vt_m 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 *