CSS (5): Animation

WBOY
Freigeben: 2016-08-18 08:58:01
Original
1229 Leute haben es durchsucht
  • 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> }
Nach dem Login kopieren
  • 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> }
Nach dem Login kopieren
  • 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> }
Nach dem Login kopieren
  • 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> }
Nach dem Login kopieren
  • 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> }
Nach dem Login kopieren
  • 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> }
Nach dem Login kopieren
  • 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> }
Nach dem Login kopieren
  • 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> }
Nach dem Login kopieren
  • Animation

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage