Maison >interface Web >Questions et réponses frontales >Quel est le nom de la propriété d'animation CSS3 ?

Quel est le nom de la propriété d'animation CSS3 ?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBoriginal: 2022-01-24 11:30:271730parcourir

En CSS3, le nom de l'attribut d'animation est "animation", qui est un attribut abrégé utilisé pour spécifier le nom de l'image clé liée, la durée de l'animation, la courbe de vitesse, le délai d'animation, les temps d'animation et s'il faut lire l'animation à l'envers. : "animation : nom du temps, vitesse, délais de retard, lecture en sens inverse".

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Quel est le nom de l'attribut d'animation CSS3 ?

L'attribut d'animation est un attribut d'abréviation utilisé pour définir six attributs d'animation :

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

Remarque : veuillez toujours spécifier l'attribut animation-duration, sinon la durée est de 0 et l'animation ne sera pas jouée .

La syntaxe est :

animation: name duration timing-function delay iteration-count direction;

La valeur représentée par le paramètre est :

Quel est le nom de la propriété danimation CSS3 ?

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 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注意: </strong> Internet Explorer 9 及更早IE版本不支持 animation 属性。</p>
<div></div>
</body>
</html>

Le résultat de sortie :

Quel est le nom de la propriété danimation CSS3 ?

(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!

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：Quelles sont les trois façons d'utiliser CSS3Article suivant：Quelles sont les trois façons d'utiliser CSS3

Articles Liés

Voir plus