CSS3 Animationen (Animations)

CSS3Die Animationsfunktion ermöglicht es Ihnen, Keyframe-Animationen zu erstellen.

CSS3Animation

Im vorherigen Kapitel haben Sie erfahren, wie man einfache Animationen durch CSS ausführt3Die Übergangsfunctionality animiert Eigenschaften von einem Wert in einen anderen. Aber CSS3Die Übergänge sind fast nicht steuerbar, wie die Animation mit der Zeit verläuft.

CSS3Animation geht einen Schritt weiter in Bezug auf Animationen basierend auf Schlüsselframes, indem Sie CSS-Eigenschaften über eine Reihe von Schlüsselframes mit der Zeit ändern können, z.B. Flash-Animationen.

Die Erstellung einer CSS-Animation ist ein zweistufiger Prozess, wie im folgenden Beispiel gezeigt:

• Der erste Schritt zur Erstellung einer CSS-Animation ist die Definition der verschiedenen Schlüsselframes und das Benennen der Animation durch Schlüsselframes.

• Der zweite Schritt ist die Verwendung von animation-Das name-Attribut referenziert den Schlüsselframe nach Namen und fügt animation-dauer und andere optionaleAnimationseigenschaftenverwendet, um das Verhalten der Animation zu spezifizieren.

Aber es ist nicht erforderlich, die Schlüsselframes-Regeln zu definieren, bevor sie zitiert oder angewendet werden. Der folgende Beispiel zeigt Ihnen, wie Sie CSS3Die Animationsfunktion wird<div>von einem Ort horizontal zum anderen gesetzt. Animation.

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　background: rot;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name: moveit;
　　　　-webkit-animation-duration:　2s;
　　　　
　　　　animation-name: moveit;
　　　　animation-duration:　2s;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes moveit {
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes moveit {
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

Sie müssen mindestens zwei Eigenschaften animation-name und animation-dauer (größer als 0), um die Animation auszuführen. Aber alle anderenAnimationseigenschaftenoptional, da ihre Standardwerte den Ablauf der Animation nicht verhindern.

definiert werden

Schlüsselframes werden verwendet, um die Werte der Animationseigenschaften in verschiedenen Stufen der Animation zu spezifizieren. Schlüsselframes sind mit speziellenCSS-Regeln-von @keyframes spezifiziert. Der Schlüsselframes-Selektor beginnt mit einem Prozentsatz (%) oder einem Schlüsselwort von (entspricht 0％) bis zu (entspricht100％）。 Der Auswahler wird verwendet, um die Position der Schlüsselframes während des Animationsvorgangs zu spezifizieren.

Prozentwerte repräsentieren den Prozentsatz der Animationsdauer, 0％ repräsentiert den Anfang der Animation,100％ repräsentiert das Ende,50％ repräsentiert den Mittelpunkt, usw. Dies bedeutet2s im Animationsvorgang50％ der Schlüssel帧 wird der Mitte des Animationsvorgangs1s.

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　margin:　100px;
　　　　background: rot;
　　　　position:　relative;
　　　　left: 0;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation-name: shakeit;
　　　　-webkit-animation-duration:　2s;
　　　　
　　　　animation-name: shakeit;
　　　　animation-duration:　2s;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes shakeit {
　　　　12.5% {left:　-50px;}
　　　　25% {left:　50px;}
　　　　37.5% {left:　-25px;}
　　　　50% {left:　25px;}
　　　　62.5% {left:　-10px;}
　　　　75% {left:　10px;}
}
　
@keyframes shakeit {
　　　　12.5% {left:　-50px;}
　　　　25% {left:　50px;}
　　　　37.5% {left:　-25px;}
　　　　50% {left:　25px;}
　　　　62.5% {left:　-10px;}
　　　　75% {left:　10px;}
}

Animationsschnelleigenschaften

Viele Eigenschaften müssen bei der Erstellung einer Animation berücksichtigt werden. Allerdings können auch alle Animationseigenschaften in einer Eigenschaft angegeben werden, um den Code zu verkürzen.

Das animation-Eigenschaft ist eine Kurzschreibweise, die alle einzeln aufgelistetenAnimationseigenschaften。例如：

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　background: rot;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation:　repeatit　2s　linear　0s　infinite　alternate;
　　　　
　　　　animation:　repeatit　2s　linear　0s　infinite　alternate;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　repeatit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　repeatit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

CSS3Animationseigenschaften.

Die folgende Tabelle gibt eine kurze Übersicht über alle mit Animationen verbundenen Eigenschaften.