Maison > Article > interface Web > Comment arrêter l'animation CSS3

Comment arrêter l'animation CSS3

醉折花枝作酒筹original: 2021-04-13 15:14:005456parcourir

En CSS, vous pouvez utiliser l'attribut animation-play-state pour contrôler la pause de l'animation, avec la syntaxe "animation-play-state:paused" la compatibilité de cet attribut dans différents navigateurs est différente, et le préfixe correspondant doit être ajouté (tel que "-ms-", "-webkit-", etc.).

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

L'animation est l'effet de changer progressivement un élément d'un style à un autre. Vous pouvez changer autant de styles que vous le souhaitez, autant de fois que vous le souhaitez. Veuillez préciser l'heure à laquelle le changement se produit sous forme de pourcentage, ou utilisez les mots-clés « de » et « à », qui équivalent à 0 % et 100 %.

L'animation CSS3 fournit directement un style d'état de lecture d'animation pour contrôler le traitement de pause de l'animation. Ajoutez un style de pause de contrôle Lors de l'écriture du style d'animation, portez une attention particulière à la compatibilité des différents navigateurs et ajoutez le préfixe correspondant.

Exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>document</title> 
<style> 
div{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s;
    animation-play-state:paused;
    /* Safari and Chrome */
    -webkit-animation:mymove 5s;
    -webkit-animation-play-state:paused;
}
@keyframes mymove
{
    from {
        left:0px;
    }
    to {
        left:200px;
    }
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
    from {
        left:0px;
    }
    to {
        left:200px;
    }
}
</style>
</head>
<body>
<p><strong>注意:</strong> animation-play-state属性不兼容 Internet Explorer 9以及更早版本的浏览器.</p>
<div></div>
</body>
</html>

L'attribut animation-play-state spécifie si l'animation est en cours d'exécution ou en pause.

Remarque : Utilisez cette propriété en JavaScript pour mettre en pause une animation pendant un cycle.

animation-play-state: paused|running;

paused : Spécifiez l'animation en pause
en cours d'exécution : Spécifiez l'animation en cours d'exécution

Recommandé Apprendre : tutoriel vidéo CSS

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment modifier le style de la barre de défilement avec CSSArticle suivant：Comment modifier le style de la barre de défilement avec CSS

Articles Liés

Voir plus