Maison > Article > interface Web > Quelle est la méthode d’écriture composée pour exécuter une animation CSS3 une fois ?
Quelle est la méthode d’écriture composée pour exécuter une animation CSS3 une fois ?
- WBOYoriginal
- 2022-06-14 15:38:242194parcourir
La méthode d'écriture composée pour définir l'exécution de l'animation une fois en CSS3 est "animation : nom du délai de vitesse 1 s'il faut jouer à l'envers", où "1" représente le nombre de fois que l'animation est jouée, c'est-à-dire le nombre de fois l'animation est exécutée ; l'animation est un attribut abrégé, avec Il est utilisé pour spécifier le nom de l'image clé de l'action, le temps d'animation, la courbe de vitesse, le délai d'animation, les temps d'animation et s'il faut lire l'animation en sens inverse pour l'animation de l'élément.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Quelle est la méthode d'écriture composite pour l'animation CSS3 à exécuter une fois ?
En CSS3, le nom de l'attribut d'animation est "animation",
Cet attribut est un attribut abrégé utilisé pour spécifier le nom de l'image clé liée, la durée de l'animation et la vitesse. courbe, délai d'animation, temps d'animation et s'il faut lire l'animation à l'envers,
La syntaxe est la suivante :
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-name spécifie le nom de l'image clé à lier au sélecteur
animation-duration animation spécifie le nombre de secondes ou de millisecondes à terminer
animation-timing-function Définit la façon dont l'animation terminera un cycle
animation-delay Définit l'intervalle de retard avant le début de l'animation.
animation-iteration-count définit le nombre de fois que l'animation est jouée.
animation-direction précise si l'animation doit être jouée à l'envers à tour de rôle.
animation-fill-mode spécifie le style à appliquer à l'élément lorsque l'animation n'est pas en cours de lecture (lorsque l'animation se termine ou lorsqu'il y a un délai avant que l'animation ne commence à jouer).
animation-play-state précise si l'animation est en cours d'exécution ou en pause.
Pour écrire l'animation composite une seule fois, définissez simplement la valeur animation-iteration-count sur 1.
L'exemple est le suivant :
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 3s 1;
/* Safari and Chrome */
-webkit-animation:mymove 3s 1;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 animation-iteration-count 属性。</p>
<div></div>
</body>Résultat de sortie :
(Partage vidéo d'apprentissage : tutoriel vidéo CSS, tutoriel vidéo HTML)
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!