Maison > Article > interface Web > Comment utiliser la propriété animation-fill-mode
Comment utiliser la propriété animation-fill-mode
- 青灯夜游original
- 2019-02-01 11:27:313846parcourir
L'attribut animation-fill-mode est utilisé pour appliquer le style à l'élément lorsque l'animation n'est pas en cours de lecture (lorsque l'animation est terminée ou lorsque l'animation a un délai avant de commencer à jouer), c'est-à-dire si son l'effet d'animation est visible.
Propriété CSS3 animation-fill-mode
Fonction : animation- L'attribut fill-mode spécifie si l'effet d'animation est visible avant ou après la lecture de l'animation.
Remarque : Par défaut, les animations CSS n'affectent pas l'élément jusqu'à ce que la première image clé soit jouée, et cessent d'affecter l'élément une fois la dernière image clé terminée. La propriété animation-fill-mode remplace ce comportement.
Syntaxe :
animation-fill-mode : none | forwards | backwards | both;
aucun : Ne modifiez pas le comportement par défaut.
forwards : Lorsque l'animation est terminée, conservez la dernière valeur d'attribut (définie dans la dernière image clé).
backwards : applique la valeur de la propriété start (définie dans la première image clé) avant que l'animation ne soit affichée pendant une période de temps spécifiée par animation-delay.
les deux : les modes de remplissage avant et arrière sont appliqués.
Remarque : Internet Explorer 9 et versions antérieures ne prennent pas en charge l'attribut animation-fill-mode.
Exemple d'utilisation de l'attribut CSS3 animation-fill-mode
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 3s;
animation-iteration-count:2;
animation-fill-mode:forwards;
/* Safari 和 Chrome */
-webkit-animation:mymove 3s;
-webkit-animation-iteration-count:2;
-webkit-animation-fill-mode:forwards;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Rendu :
Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !
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!