CSS (5): Animation

• Animationsname

Animationsname
Syntax: Animationsname: keine| Der durch das
-Element definierte Animationsname muss in Verbindung mit der Regel @keyframes verwendet werden, da der Animationsname durch @keyframes definiert wird .

• @keyframes

Syntax:
@keyframes {
[from|to|]{sRules}[,*]
}
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> }

• Animationsdauer

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> }

• Animations-Timing-Funktion

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ögerung

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> }

• animation-iteration-count

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> }

• Animationsrichtung

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> }

• Animationsfüllmodus

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> }

• Animation-Play-State

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> }

• Animation

Abgekürzte Attribute der Animation
Animation: [Animationsname] || [Animationsdauer] ||. iteration-count ] ||. >