Detaillierte Einführung in CSS3-Animationseigenschaften und Keyframe-Regeln für Animations-Keyframes

Als ich gestern den dreidimensionalen Würfel geschrieben habe, habe ich die Syntax von Animation verwendet.

Kommen Sie heute zum System, um zu überprüfen
Der Übergang hat seine Einschränkung
ist einfach, aber er kann nur zwischen zwei Zuständen
wechseln und erfordert dazu den Treiber des Ereignisses zu
Sie können sich nicht alleine bewegen
Um dieses Problem zu lösen
wir brauchen Animationsanimation

Animation

Wenn Sie einen Animationseffekt erzielen möchten
nur AnimationAttribute reichen nicht aus
Wir benötigen auch @SchlüsselRahmenregeln
Schauen wir uns zuerst ein Beispiel an

p class="demo"></p>

.demo {    width: 100px;    height: 100px;    background-color: gold;}.demo:hover {    animation: change 2s linear;}@keyframes change {
    0% {        background-color: red;    }
    50% {        background-color: purple;    }
    100% {        background-color: lime;    }}

Wenn die Maus schwebt, das Element Zuerst rot und dann Übergang zu Lila und dann Übergang zu Grün

Schauen wir uns zunächst die @keyframes-Regeln

Keyframes

an In @keyframes definieren wir die Animations-Keyframes
und dann führt die Animation den Übergang entsprechend dem Frame-Status aus, den wir in den Keyframes angegeben haben. Keyframes
0 % - 100 % stellen den Zeitübergang der Animation dar
0 % und 100 % in den Regeln,
Kann durch Schlüsselwörter „von“ und „bis“ ersetzt werden

@keyframes xxx {    from {        ......
    }
    to {
        ......
    }
}

---

Wenn wir den Startrahmen weglassen, wechselt der Browser zu seinem ursprünglichen Stil

@keyframes change {
    100% {        background-color: lime;    }}

---

Darüber hinaus können wir auch die gleichen Frames wie folgt zusammenschreiben

@keyframes change {    from,to {        background-color: red;    }
    50% {        background-color: blue;    }}

Animation

Animation ist eine zusammengesetztes Attribut. Es gibt die folgenden Untereigenschaften:

• Animationsname
  Geben Sie den Namen der Keyframes-Animation an

• Animationsdauer
  Geben Sie die Ausführungszeit der Animation an

• Animations-Timing-Funktion
  Geben Sie die Geschwindigkeitskurve an der Animation ist die Standardeinstellung „ease“

• animation-delay
  Animationsverzögerungszeit angeben, Standardeinstellung „0“ keine Verzögerung

• animation -iteration-count
  Gibt an, wie oft die Animation abgespielt wird. Der Standardwert ist „1“ und wird einmal ausgeführt

• Animation-Richtung
  Gibt die Ausführungsrichtung der Animation an, der Standardwert ist „normal“

Dieses zusammengesetzte Attribut ist komplizierter als unser Übergang
Die ersten vier Attribute sind nicht viele Erklärungen, ähnlich unserem Übergang
Für diejenigen, die es vergessen haben, klicken Sie hier -> Portal

animation-iteration-count Zusätzlich zum Ausfüllen der Anzahl kann
auch eine Endlosschleife mit häufig verwendeten Schlüsselwörtern

animation-direction verwenden, die zusätzlich zu normal die folgenden Attributwerte aufweist

• umgekehrt Animation rückwärts abspielen
  

• abwechselnd Animation abspielen der Reihe nach
  

• alternativ-umgekehrt Umgekehrte Rotationsanimation
  

Anhand eines Beispiels erklärt

.demo {    width: 100px;    height: 100px;    background-color: gold;}.demo:hover {    animation: change 1s 2 linear;}@keyframes change {    to {        width: 200px;    }}

Standard

normal:
Zwei Testanimationen:
100px -> 🎜>100px -> 200px

---

.demo:hover {    animation: change 1s 2 linear reverse; /*改*/}

umgekehrt

:
Zwei Testanimationen: 200px -> 100px
200px -> 100px>

alternativ

:

---

.demo:hover {    animation: change 1s 2 linear alternate; /*改*/}

Zwei Testanimationen: 100px -> 200px


Alternate-Reverse
:

---

.demo:hover {    animation: change 1s 2 linear alternate-reverse; /*改*/}

Zwei Testanimationen:

200px -> 100px Animationsfüllung -mode
Die beiden Dinge, über die ich unten sprechen möchte. Keines der Attribute ist Unterattribute der Animation
, daher können sie nicht in Animation geschrieben werden

animation-fill-mode gibt an der Zustand des

Objekts

außerhalb der Animationszeit, und der Standardwert ist „none“

Zusätzlich zu „none“ gibt es die folgenden Attributwerte

für
Bezirke

Nachdem die Animation abgeschlossen ist, behalten Sie das letzte Attribut (definiert im letzten Frame) bei

• backwards
  在animation-delay指定时间内、动画显示之前，应用起始属性（定义在第一帧）

• both
  应用forwards和backwards两种模式

---

forwards
这个属性还是蛮有用的
还是我们上面的例子

.demo:hover {    animation: change 1s linear; /*改*/
    animation-fill-mode: forwards; /*改*/}

我们发现1s之后，元素并没有回到最初的100px，而是保持了我们最后一帧的200px状态

---

backwards
理解这个属性，我们需要先加一个延时

.demo:hover {    animation: change 1s linear 1s; /*改*/
    /*animation-fill-mode: backwards;*/ /*待增*/}@keyframes change {    from {  /*增*/
        width: 150px;    }
    to {        width: 200px;    }}

我就不配图了
我们发现鼠标悬浮后，1s后瞬间变为150px，然后再过渡到200px
hover-0s -> 1s -> 2s
100px ->瞬变150px –> 过渡到200px

现在增加backwards

.demo:hover {    animation: change 1s linear 1s; /*改*/
    animation-fill-mode: backwards; /*增*/}

这回我们发现鼠标悬浮的一瞬间就变为15px，然后1s后过渡到200px
hover-0s -> 1s -> 2s
瞬变150px ->150px –> 过渡到200px
这就是backwards的作用，延迟前就应用第一帧动画的样式，然后准备过渡

animation-play-state

animation-play-state 指定动画的运行或暂停。默认 “running”
除了running还有paused
利用这个属性再配合js我们可以控制动画的暂停和运行

demo.style.animationPlayState = "paused";

---

今天的动画就先写这么多，感觉写了很长时间
日后再总结动画相关的性能问题

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in CSS3-Animationseigenschaften und Keyframe-Regeln für Animations-Keyframes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!