Heim > Artikel > Web-Frontend > Wie lautet der Name der CSS3-Animationseigenschaft?

Wie lautet der Name der CSS3-Animationseigenschaft?

WBOYOriginal: 2022-01-24 11:30:271635Durchsuche

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.

Wie heißt das CSS3-Animationsattribut?

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:

Wie lautet der Name der CSS3-Animationseigenschaft?

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:

Wie lautet der Name der CSS3-Animationseigenschaft?

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Welche drei Möglichkeiten gibt es, CSS3 zu verwenden?Nächster Artikel：Welche drei Möglichkeiten gibt es, CSS3 zu verwenden?

In Verbindung stehende Artikel

Mehr sehen