Comment obtenir l'effet de ne pas disparaître à la fin de l'animation en CSS3-Questions et réponses frontales-php.cn

Comment obtenir l'effet de ne pas disparaître à la fin de l'animation en CSS3

WBOY

Libérer： 2022-03-29 17:06:50

original

2969 Les gens l'ont consulté

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

Comment obtenir l'effet de ne pas disparaître à la fin de l'animation en CSS3

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;

Copier après la connexion

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>

Copier après la connexion

Résultat de sortie :

Comment obtenir leffet de ne pas disparaître à la fin de lanimation en CSS3