Tutoriel sur l'utilisation du CSS pour implémenter les fonctions pause et lecture de l'animation CSS

CSS est un langage qui définit des structures de style telles que les polices, les couleurs, les positions, etc. Il est utilisé pour décrire la façon dont les informations sur les pages Web sont formatées et affichées. Les styles CSS peuvent être stockés directement dans des pages Web HTML ou dans des fichiers de feuille de style séparés. Quoi qu'il en soit, une feuille de style contient des règles permettant d'appliquer des styles aux éléments d'un type spécifié. Dans cette section, nous partagerons avec vous un tutoriel sur l'utilisation de CSS pour implémenter les fonctions pause et lecture des animations CSS.

Nous savons que dans l'animation CSS3, il existe une propriété qui peut mettre en pause et lire une animation :

{ 
   animation-play-state: paused | running; 
 }

animation-play-state : La propriété définit si une animation est en cours d'exécution ou en pause . Vous pouvez l'interroger pour déterminer si l'animation est en cours d'exécution. De plus, sa valeur peut être définie pour mettre en pause et reprendre la relecture de l'animation.

Avec l'aide de Javascript, nous pouvons contrôler l'exécution et la lecture des animations CSS. Certains codes clés sont répertoriés ci-dessous :

<div class="btn">stop</div>  <div class="animation"></div> 
 <style>  .animation {      animation: move 2s linear infinite alternate;  } 
  @keyframes move {      0% {          transform: translate(-100px, 0);      }  
      100% {          transform: translate(100px, 0);      }  }
        </style> document.querySelector(&#39;.btn&#39;).addEventListener(&#39;click&#39;, function() 
        {      let btn = document.querySelector(&#39;.btn&#39;);      let elem = document.querySelector(&#39;.animation&#39;);  
            let state = elem.style[&#39;animationPlayState&#39;];            if(state === &#39;paused&#39;)
             {          elem.style[&#39;animationPlayState&#39;] = &#39;running&#39;;          btn.innerText = &#39;stop&#39;;      }
              else {          elem.style[&#39;animationPlayState&#39;] = &#39;paused&#39;;          btn.innerText = &#39;play&#39;;      }        }); 
Demo — pause CSS Animation(https://codepen.io/Chokcoco/pen/GWYBdM)

Implémentation CSS pure

Discutons. ci-dessous, cela peut-il être réalisé en utilisant du CSS pur.

Implémentation de la pseudo-classe de survol

Utilisez la pseudo-classe de survol pour contrôler la pause du style d'animation lorsque la souris survole le bouton.

Le code clé est le suivant :

<div class="btn stop">stop</div> 
 
<div class="animation"></div> 
 
<style> 
 .stop:hover ~ .animation { 
 
    animation-play-state: paused; 
 
} 
 
</style>

Démo - méthode CSS pure pour réaliser la pause et la lecture de l'animation CSS (Hover) : (https://codepen.io/Chokcoco /pen/PpxKBX)

Bien sûr, cette méthode n'est pas assez intelligente. Si vous relâchez la liberté de la souris, cliquez une fois pour mettre en pause puis cliquez à nouveau pour jouer. Existe-t-il une autre méthode ?

Implémentation de pseudo-classe vérifiée

L'article précédent "Sujet CSS intéressant (8) : Solution de commutation d'onglets de barre de navigation CSS pure" parlait également de l'utilisation de la balise radio. pseudo-classe vérifiée, plus l'implémentation de CSS pur pour capturer les événements de clic.

Et vous pouvez contrôler certains styles CSS en utilisant l'élément cliqué. L'implémentation est la suivante :

<input id="stop" type="radio" name="playAnimation" /> 
 
<input id="play" type="radio" name="playAnimation" /> 
 
<div class="box"> 
 
    <label for="stop"> 
 
        <div class="btn">stop</div> 
 
    </label> 
 
    <label for="play"> 
 
        <div class="btn">play</div> 
 
    </label> 
 
</div> 
 
<div class="animation"></div>

Partie du code CSS clé :

.animation { 
 
    animation: move 2s linear infinite alternate; 
 
} 
 
  
 #stop:checked ~ .animation { 
 
    animation-play-state: paused; 
 
} 
 
  
 #play:checked ~ .animation { 
 
    animation-play-state: running; 
 
}

Nous espérons que lorsque les deux radios #stop et #play seront cliquées, l'animation-play sera être attribué à l'élément .animation respectivement -state: paused ou animation-play-state: running . Et un seul des deux peut prendre effet, les deux balises radio doivent donc recevoir le même attribut de nom.

DEMO — Implémentez la pause et la lecture de l'animation CSS en utilisant du CSS pur : (https://codepen.io/Chokcoco/pen/QpJwBW)

Dans l'exemple de démonstration ci-dessus, du CSS pur est implémenté Méthode pour réaliser une pause et une lecture de l'animation CSS.

Bien sûr, il existe d'autres méthodes, comme remplacer la radio par une case à cocher, ou utiliser le sélecteur de pseudo-classe :target pour obtenir le même effet ci-dessus. Si vous êtes intéressé, vous pouvez l'essayer.

Ce qui précède est un tutoriel sur la façon d'implémenter la fonction pause et lecture de l'animation CSS à l'aide de CSS. J'espère que cela pourra aider tout le monde.

Recommandations associées :

Comment créer QQ Penguin avec HTML et CSS

Css pour réaliser une tête de chat en mouvement

Tutoriel de dessin graphique simple CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!