Maison > Article > interface Web > Comment utiliser la propriété CSS animation-fill-mode
Comment utiliser la propriété CSS animation-fill-mode
- (*-*)浩original
- 2019-05-28 18:06:043155parcourir
L'attribut animation-fill-mode spécifie si l'effet d'animation est visible avant ou après la lecture de l'animation.
Remarque : La valeur de l'attribut est un ou plusieurs mots-clés de motif de remplissage séparés par des virgules.
Syntaxe
animation-fill-mode : none | forwards | backwards | both;
|
Description |
||||||||||
| aucun | Ne modifie pas le comportement par défaut. | ||||||||||
| avant | Lorsque l'animation est terminée, conservez la dernière valeur de propriété (définie dans la dernière image clé). | ||||||||||
| en arrière | en animation -Delay applique la valeur de la propriété de démarrage (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 -delay. | ||||||||||
| les deux | avant et les modes de remplissage vers l'arrière sont appliqués. |
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
animation-fill-mode: forwards;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment utiliser l'attribut CSS word-wrapArticle suivant：Comment utiliser l'attribut CSS word-wrap