Comment arrêter l'animation CSS3-tutoriel CSS-php.cn

Comment arrêter l'animation CSS3

醉折花枝作酒筹

Libérer： 2023-01-05 16:08:05

original

5495 Les gens l'ont consulté

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.).

Comment arrêter l'animation CSS3

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>

Copier après la connexion

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.