So verwenden Sie die CSS3-Animationseigenschaft-CSS-Tutorial-php.cn

So verwenden Sie die CSS3-Animationseigenschaft

青灯夜游

Freigeben： 2019-05-25 11:27:34

Original

6972 Leute haben es durchsucht

Die CSS3-Animationseigenschaft ist eine Abkürzungseigenschaft, die Animationseffekte durch Festlegen von sechs Animationseigenschaften erzielt. Diese sechs Attribute sind Animationsname, Animationszeit, Geschwindigkeitskurve, Animationsverzögerung, Abspielzeiten und ob die Animation rückwärts abgespielt wird.

So verwenden Sie die CSS3-Animationseigenschaft

CSS3-Animationseigenschaft

Funktion: Animationseigenschaft ist Eine Abkürzungseigenschaft zum Festlegen von sechs Animationseigenschaften.

Syntax:

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

Nach dem Login kopieren

Beschreibung: Die sechs Animationsattribute, die durch das animationsattribut festgelegt werden können, sind:

● Animationsname: Gibt den Keyframe-Namen an, der an den Selektor gebunden werden muss.

● Animationsdauer: Gibt die Zeit an, die zum Abschließen der Animation benötigt wird, in Sekunden oder Millisekunden.

● Animation-Timing-Funktion: Gibt die Geschwindigkeitskurve der Animation an.

● Animationsverzögerung: Gibt die Verzögerung an, bevor die Animation beginnt.

● Animation-Iteration-Count: Gibt an, wie oft die Animation abgespielt werden soll.

● Animationsrichtung: Gibt an, ob die Animation der Reihe nach rückwärts abgespielt werden soll.

Hinweis: Das Attribut „animation-duration“ muss immer festgelegt sein, andernfalls wird die Animation nicht abgespielt, wenn die Dauer 0 ist.

Verwendungsbeispiel für CSS3-Animationsattribute

<!DOCTYPE html>
<html>
<head>
<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 以及更早的版本不支持 animation 属性。</p>

<div></div>

</body>
</html>

Nach dem Login kopieren

Rendering:

So verwenden Sie die CSS3-Animationseigenschaft

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS3-Animationseigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!