Eine ausführliche Diskussion der Animationssequenz von CSS3-Animationsspezialeffekten-CSS-Tutorial-php.cn

Jeder weiß, dass Animation eine Eigenschaft von CSS ist. In diesem Artikel werden hauptsächlich die relevanten Informationen zur Animationssequenz (Animation) von CSS3-Animationsspezialeffekten vorgestellt es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Überprüfen Sie zunächst die verschiedenen Parameter, die der Animationsanimation hinzugefügt wurden:

(1) unendlicher Parameter, der angibt, dass die Animation eine Endlosschleife durchläuft. Zwischen der Geschwindigkeitskurve und der Anzahl der Wiedergaben kann auch ein Zeitparameter eingefügt werden, um die Animationsverzögerungszeit festzulegen. Wenn Sie möchten, dass sich das Symbol nach 1 Sekunde zu drehen beginnt und sich dann zweimal dreht, lautet der Code wie folgt:

.close:hover::before{
    -webkit-animation: spin 1s linear 1s 2;
    animation: spin 1s linear 1s 2;
}

Nach dem Login kopieren

(2) alternativer Parameter. Fügen Sie der Animationsanimation den Parameter „Alternate“ für die umgekehrte Wiedergabe hinzu. Nach dem Hinzufügen dieses Parameters wird die Animation in gerader Anzahl rückwärts abgespielt.

.close:hover::before{
    -webkit-animation: spin 1s linear 1s 2 alternate;
    animation: spin 1s linear 1s 2 alternate;
}

Nach dem Login kopieren

Unter den Animationsattributparametern ist der Verzögerungsparameter einer unserer am häufigsten verwendeten Parameter. Wenn mehrere animierte Objekte vorhanden sind, verwenden wir häufig Verzögerungsparameter, um Animationssequenzen zu bilden. Der folgende Code definiert beispielsweise 5 verschiedene Symbole:

<span class="close icon-suningliujinyun">Close</span>
<span class="close icon-shousuo">Close</span>
<span class="close icon-zhankai">Close</span>
<span class="close icon-diaoyonglian">Close</span>
<span class="close icon-lingshouyun">Close</span>

Nach dem Login kopieren

Der Grundstil des Symbols ist der gleiche wie beim vorherigen Schließen-Symbol. Der Unterschied besteht darin, dass die Symbole Hier sind alle Inline-Blocks so eingestellt, dass sie horizontal angeordnet werden können. Der Code lautet wie folgt:

.close{
    font-size:0px;/*使span中的文字不显示*/
    cursor:pointer;/*使鼠标指针显示为手型*/
    display:inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    border-radius:50%;/*使背景形状显示为圆形*/
    background:#FFF;
    color:#8b8ab3;
    text-align:center;
}
.close::before{
    font-family: &#39;suningcloud&#39;;
    speak:none; /*使文本内容不能通过屏幕阅读器等辅助设备读取*/
    font-size:48px;
    display:block;
}

Nach dem Login kopieren

wird während der Initialisierung angezeigt, wie in der Abbildung unten gezeigt; >Als nächstes verschieben Sie für „Fügen Sie eine Animation zum Symbol hinzu“, um die Anfangsposition des Symbols um -100 % nach unten und dann nach oben zurück in die Anfangsposition zu verschieben. Während dieses Vorgangs ändert sich auch das Symbol von vollständig transparent zu vollständig undurchsichtig

Die Animationseffekte der oben genannten 5 Symbole werden alle gleichzeitig ausgeführt. Um die Symbolbewegung sequentiell zu gestalten, fügen wir jeder Animation eine Verzögerung hinzu . Anders als bei der vorherigen Methode können wir die Animationsverzögerung direkt über das Attribut „animation-delay“ festlegen. Der Code lautet wie folgt:

.close{
	font-size:0px;/*使span中的文字不显示*/
	cursor:pointer;/*使鼠标指针显示为手型*/
	display:inline-block;
	width:100px;
	height:100px;
	line-height:100px;
	border-radius:50%;/*使背景形状显示为圆形*/
	background:#FFF;
	color:#8b8ab3;
	text-align:center;
	/**/
	-webkit-animation: moving 1s linear;
	animation: moving 1s linear;
}

@-webkit-keyframes moving {
    from {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@keyframes moving {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}

Nach dem Login kopieren

Im obigen Code haben wir eingestellt Die Verzögerungszeiten der fünf Symbole betragen jeweils 0, 0,1, 0,2, 0,3 und 0,4 s. Tatsächlich ist eine Verzögerung von 0 Sekunden die Standardeinstellung, sodass das erste Symbol auch keinen Verzögerungscode festlegen muss. Testseite, der Animationseffekt ist wie in der Abbildung gezeigt.

.icon-suningliujinyun{
	-webkit-animation-delay:0s;
	animation-delay: 0s;
}
.icon-shousuo{
	-webkit-animation-delay:.1s;
	animation-delay: .1s;
}
.icon-zhankai{
	-webkit-animation-delay:.2s;
	animation-delay: .2s;
}
.icon-diaoyonglian{
	-webkit-animation-delay:.3s;
	animation-delay: .3s;
}
.icon-lingshouyun{
	-webkit-animation-delay:.4s;
	animation-delay: .4s;
}

Nach dem Login kopieren

Ich habe es zweimal aktualisiert und festgestellt, dass ganz am Anfang mehrere Symbole oben blinkten. Dies wird als Fehler angesehen

Der Grund für diesen Fehler ist, dass mit Ausnahme des ersten Symbols die restlichen Symbole eine gewisse Animationsverzögerung haben. Wenn die Animation nicht startet, verschiebt sich das Symbol nicht und ist vollständig Erst wenn die Animation startet, wechselt das Symbol in den vollständig transparenten und versetzten Animationsstartzustand.

Lösung: Sie müssen das Attribut „animation-fill-mode“ der Animationsanimation verwenden. Diese Eigenschaft gibt den Zustand des Elements außerhalb der Animationszeit an. Wenn der Wert vorwärts ist, bedeutet dies, dass der Attributwert im letzten Schlüsselbild beibehalten wird, nachdem die Animation abgeschlossen ist. Wenn der Wert rückwärts ist, ist es genau umgekehrt, was bedeutet, dass der Attributwert im ersten Schlüsselbild angewendet wird zum Element, bevor die Animation verzögert wird. Wenn der Wert „beide“ ist, bedeutet dies, dass sowohl Vorwärts- als auch Rückwärtseinstellungen enthalten sind. In diesem Beispiel können wir rückwärts oder beides verwenden:

Der Effekt ist wie folgt:

.close{
    font-size:0px;/*使span中的文字不显示*/
    cursor:pointer;/*使鼠标指针显示为手型*/
    display:inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    border-radius:50%;/*使背景形状显示为圆形*/
    background:#FFF;
    color:#8b8ab3;
    text-align:center;
    /**/
    -webkit-animation: moving 1s linear;
    animation: moving 1s linear;
    /*清除抖动*/
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
}

Nach dem Login kopieren

PS: In der Animation können Sie die Geschwindigkeitskurve auch wie bei der Übergangsanimation festlegen

Beispiel: In diesem Beispiel hoffen wir, dass die Bewegung des Symbols einen kleinen elastischen Effekt hat, d. h. wenn das Symbol Wenn es sich nach oben bewegt, verlangsamt es sich nicht und stoppt am Endpunkt. Nach Erreichen einer bestimmten Distanz bewegt es sich in die entgegengesetzte Richtung und kehrt zum Endpunkt zurück, wodurch ein Hin- und Herbewegungseffekt entsteht .

Natürlich können wir Frame-Animationen verwenden, um diesen Effekt zu erzielen, aber es wird einfacher, wenn wir eine Geschwindigkeitskurve verwenden. Um benutzerdefinierte Kurven zu verwenden, benötigen wir häufig einige Werkzeuge, da CSS3-Animationen die mathematische Funktion „Cubic Bezier“ zum Generieren der Geschwindigkeitskurve verwenden und die Parameter dieser Funktion nicht intuitiv sind. Um die Geschwindigkeitskurve visuell anzupassen, können wir Seiten wie „cubic-bezier.com“ nutzen.

Als nächstes können wir die Geschwindigkeitskurve in die Parameter des Animationsattributs schreiben. Der Code lautet wie folgt:

Der Effekt ist wie folgt unten gezeigt:

.close{
    font-size:0px;/*使span中的文字不显示*/
    cursor:pointer;/*使鼠标指针显示为手型*/
    display:inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    border-radius:50%;/*使背景形状显示为圆形*/
    background:#FFF;
    color:#8b8ab3;
    text-align:center;
    /**/
    /*-webkit-animation: moving 1s linear;
    animation: moving 1s linear;*/
    /*cubic-bezier*/
    -webkit-animation:moving 1s cubic-bezier(.62,-0.91,.45,1.97);
      animation:moving 1s cubic-bezier(.62,-0.91,.45,1.97);
    /*清除抖动*/
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
}

Nach dem Login kopieren

Verwandte Empfehlungen:

So implementieren Sie Optionsfeld-Animationseffekte in CSS3

Pure CSS3 realisiert 3D-Bildwürfel-Rotations-Animations-Spezialeffekte

Einführung in die geschickte Verwendung des CSS3-Animations-Animations-Spezialeffekt-Plugins

Das obige ist der detaillierte Inhalt vonEine ausführliche Diskussion der Animationssequenz von CSS3-Animationsspezialeffekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!