propriété css3 animation-fill-mode
Résultats de traduction：
英[fɪl ] 美[fɪl]
vt.& vi. (faire) plein, (faire) plein vt pour préparer des médicaments (sur commande); (sentiments) n. pour remplir la quantité de... ;plein; remplir; remblaiTroisième personne du singulier: remplit le pluriel: remplit le participe passé: rempli le participe passé: remplimode
英[məʊd] 美[moʊd] n manière; mode, modepluriel: modespropriété css3 animation-fill-modesyntaxe
Fonction : L'attribut animation-fill-mode spécifie si l'effet d'animation est visible avant ou après la lecture de l'animation.
Syntaxe : animation-fill-mode : none | forward | forwards Une fois l'animation terminée, conservez la dernière valeur de propriété (définie dans la dernière image clé). applique en arrière 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 modes de remplissage avant et arrière sont appliqués.
Remarque : Internet Explorer 9 et les versions antérieures ne prennent pas en charge l'attribut animation-fill-mode.
propriété css3 animation-fill-modeexemple
<!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>
<p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-fill-mode 属性。</p>
<div></div>
</body>
</html>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne