Animationsname
Syntax: Animationsname: keine|
-Element definierte Animationsname muss in Verbindung mit der Regel @keyframes verwendet werden, da der Animationsname durch @keyframes definiert wird .
Syntax:
@keyframes
[from|to|
}
wird als Keyframe bezeichnet, was ähnlich ist zu Keyframes in Flash. In CSS3 beginnt es hauptsächlich mit „@keyframes“, gefolgt vom Namen der Animation und einem Paar geschweifter Klammern „{...}“. In den Klammern stehen einige Stilregeln für verschiedene Zeiträume.
<span style="color: #008080;">1</span> <span style="color: #000000;">/*定义一个名为"fromLeftToRight"的向右移动的动画*/ </span><span style="color: #008080;">2</span> <span style="color: #000000;">@keyframes fromLeftToRight{ </span><span style="color: #008080;">3</span> <span style="color: #000000;"> from{margin:0;} </span><span style="color: #008080;">4</span> <span style="color: #000000;"> to{margin:100px;} </span><span style="color: #008080;">5</span> }
Legen Sie die Dauer der Animation fest
Syntax: animation-duration:
<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果,并持续一秒时间*/ </span><span style="color: #008080;">2</span> <span style="color: #000000;">div{ </span><span style="color: #008080;">3</span> <span style="color: #000000;"> animation-name:fromLeftToRight; </span><span style="color: #008080;">4</span> <span style="color: #000000;"> animation-duration:1s; </span><span style="color: #008080;">5</span> }
Animationstyp mit Übergangsgeschwindigkeit
Syntax: Animation-Timing-Funktion:ease|linear|ease-in|ease-out|ease-in-out
<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果,持续一秒时间,并且过渡类型为ease-in*/ </span><span style="color: #008080;">2</span> <span style="color: #000000;">div{ </span><span style="color: #008080;">3</span> <span style="color: #000000;"> animation-name:fromLeftToRight; </span><span style="color: #008080;">4</span> <span style="color: #000000;"> animation-duration:1s; </span><span style="color: #008080;">5</span> <span style="color: #000000;"> animation-timing-function:ease-in; </span><span style="color: #008080;">6</span> }
Animationsverzögerungszeit festlegen
Syntax: Animationsverzögerung:
<span style="color: #008080;">1</span> /*<span style="color: #000000;">给div一个名为"fromLeftToRight"的动画效果,延迟一秒后执行*/ </span><span style="color: #008080;">2</span> <span style="color: #000000;">div{ </span><span style="color: #008080;">3</span> <span style="color: #000000;"> animation-name:fromLeftToRight; </span><span style="color: #008080;">4</span> <span style="color: #000000;"> animation-duration:1s; </span><span style="color: #008080;">5</span> <span style="color: #000000;"> animation-timing-function:ease-in; </span><span style="color: #008080;">6</span> <span style="color: #000000;"> animation-delay: 1s; </span><span style="color: #008080;">7</span> }
Legen Sie die Anzahl der Animationsausführungen fest
Syntax: Animation-Iteration-Count: unendlich|
unendlich bedeutet unbegrenzte Zeiten
<span style="color: #008080;">1</span> /*<span style="color: #000000;">给div一个名为"fromLeftToRight"的动画效果,执行两次后停止*/ </span><span style="color: #008080;">2</span> <span style="color: #000000;">div{ </span><span style="color: #008080;">3</span> <span style="color: #000000;"> animation-name:fromLeftToRight; </span><span style="color: #008080;">4</span> <span style="color: #000000;"> animation-duration:1s; </span><span style="color: #008080;">5</span> <span style="color: #000000;"> animation-timing-function:ease-in; </span><span style="color: #008080;">6</span> <span style="color: #000000;"> animation-iteration-count: 2; </span><span style="color: #008080;">7</span> }
Legen Sie fest, ob die Animation in umgekehrter Reihenfolge in der Schleife ausgeführt wird
Syntax: Animationsrichtung: normal|reverse|alternate|alternate-reverse
Beschreibung:
normal: normale Richtung
umgekehrt: Lauf in umgekehrter Richtung
Alternate: Die Animation läuft zuerst normal und dann in Rückwärtsrichtung und läuft abwechselnd weiter
Alternate-Reverse: Die Animation läuft zuerst in Rückwärtsrichtung und dann in Vorwärtsrichtung, und läuft abwechselnd weiter
<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果,并且反复运行*/ </span><span style="color: #008080;">2</span> <span style="color: #000000;">div{ </span><span style="color: #008080;">3</span> <span style="color: #000000;"> animation-name:fromLeftToRight; </span><span style="color: #008080;">4</span> <span style="color: #000000;"> animation-duration:1s; </span><span style="color: #008080;">5</span> <span style="color: #000000;"> animation-timing-function:ease-in; </span><span style="color: #008080;">6</span> <span style="color: #000000;"> animation-iteration-count: infinite; </span><span style="color: #008080;">7</span> <span style="color: #000000;"> animation-direction: alternate; </span><span style="color: #008080;">8</span> }
Legen Sie den Status von Anfang und Ende der Animation fest
Syntax: Animationsfüllmodus: keine|vorwärts|rückwärts|both
Beschreibung:
keine: Standardwert. Der Zustand ohne Animation
Vorwärts: Setzt den Objektstatus auf den Zustand am Ende der Animation
Rückwärts: Setzt den Objektstatus auf den Zustand am Anfang der Animation
Beide: Setzt den Objektstatus auf der Zustand am Ende oder Anfang der Animation
<span style="color: #008080;">1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果,并且动画结束后元素位于动画结束时的位置*/ </span><span style="color: #008080;">2</span> <span style="color: #000000;">div{ </span><span style="color: #008080;">3</span> <span style="color: #000000;"> animation-name:fromLeftToRight; </span><span style="color: #008080;">4</span> <span style="color: #000000;"> animation-duration:1s; </span><span style="color: #008080;">5</span> <span style="color: #000000;"> animation-timing-function:ease-in; </span><span style="color: #008080;">6</span> <span style="color: #000000;"> animation-iteration-count: 3; </span><span style="color: #008080;">7</span> <span style="color: #000000;"> animation-fill-mode: forwards; </span><span style="color: #008080;">8</span> }
Legen Sie den Wiedergabestatus der Animation fest
Syntax: Animation-Play-State: Running|Pause
<span style="color: #008080;"> 1</span> <span style="color: #000000;">/*给div一个名为"fromLeftToRight"的动画效果,并且当div处于hover状态时暂停动画*/ </span><span style="color: #008080;"> 2</span> <span style="color: #000000;">div{ </span><span style="color: #008080;"> 3</span> <span style="color: #000000;"> animation-name:fromLeftToRight; </span><span style="color: #008080;"> 4</span> <span style="color: #000000;"> animation-duration:1s; </span><span style="color: #008080;"> 5</span> <span style="color: #000000;"> animation-timing-function:ease-in; </span><span style="color: #008080;"> 6</span> <span style="color: #000000;"> animation-iteration-count: infinite; </span><span style="color: #008080;"> 7</span> <span style="color: #000000;">} </span><span style="color: #008080;"> 8</span> <span style="color: #000000;">div:hover{ </span><span style="color: #008080;"> 9</span> <span style="color: #000000;"> animation-play-state: paused; </span><span style="color: #008080;">10</span> }
Abgekürzte Attribute der Animation
Animation: [Animationsname] || [Animationsdauer] ||. iteration-count ] ||.