In CSS3 lautet der Name des Animationsattributs „animation“. Dabei handelt es sich um ein abgekürztes Attribut, mit dem der gebundene Keyframe-Name, die Animationszeit, die Geschwindigkeitskurve, die Animationsverzögerung, die Animationszeiten und die Angabe der umgekehrten Syntax angegeben werden : „Animation: Name, Zeit, Geschwindigkeit, Verzögerungszeiten, ob in umgekehrter Richtung abgespielt werden soll“.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
animationsattribut ist ein Abkürzungsattribut, das zum Festlegen von sechs Animationsattributen verwendet wird:
animationsname
animationsdauer
animations-timing-function
animation-delay
animation-iteration-count
animation-direction
Hinweis: Bitte geben Sie immer das Attribut „animation-duration“ an, andernfalls ist die Dauer 0 und die Animation wird nicht abgespielt .
Die Syntax lautet:
animation: name duration timing-function delay iteration-count direction;
Der durch den Parameter dargestellte Wert lautet:
Das Beispiel lautet wie folgt:
<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>Das Ausgabeergebnis:
(Lernvideo-Sharing: css. Video Tutorial )
Das obige ist der detaillierte Inhalt vonWie lautet der Name der CSS3-Animationseigenschaft?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
