Maison > Article > interface Web > Comment obtenir l'effet de ne pas disparaître à la fin de l'animation en CSS3
Comment obtenir l'effet de ne pas disparaître à la fin de l'animation en CSS3
- WBOYoriginal
- 2022-03-29 17:06:502929parcourir
En CSS3, vous pouvez utiliser l'attribut "animation-fill-mode" pour obtenir l'effet de ne pas disparaître une fois l'animation terminée. Cet attribut peut spécifier le style de l'élément lorsque l'animation n'est pas jouée. vers l'avant, l'effet d'animation ne disparaîtra pas. La syntaxe est "animation -fill-mode:forwards".
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment obtenir l'effet de ne pas disparaître lorsque l'animation se termine en css3
L'attribut animation-fill-mode spécifie le style à appliquer à l'élément lorsque l'animation n'est pas jouée (lorsque l'animation est terminée, ou lorsque l'animation a un retard et ne commence pas à jouer).
Par défaut, les animations CSS n'affecteront pas les éléments avant la lecture de la première image clé et cesseront d'affecter les éléments une fois la dernière image clé terminée. La propriété animation-fill-mode remplace ce comportement.
Syntaxe CSS
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
aucune valeur par défaut. L'animation n'applique aucun style à l'élément cible avant ou après l'exécution de l'animation.
forwards Une fois l'animation terminée (déterminée par le nombre d'itérations d'animation), l'animation appliquera cette valeur de propriété. L'animation
backwards appliquera la valeur de propriété définie dans l'image clé qui a démarré la première itération de l'animation lors de la définition du délai d'animation. Ce sont des valeurs dans from keyframes (lorsque la direction de l'animation est "normal" ou "alternate" ) ou dans to keyframes (lorsque la direction de l'animation est "reverse" ou "alternate-reverse" ).
les deux animations suivent les règles de l'avant et de l'arrière. Autrement dit, l'animation étend la propriété d'animation dans les deux sens.
initial définit cette propriété à sa valeur par défaut.
inherit hérite de cette propriété de l'élément parent.
L'exemple est le suivant :
<html>
<head>
<meta charset="utf-8">
<title>123</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>Résultat de sortie :
(Partage vidéo d'apprentissage : 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!