CSS3-Animationssequenzanimation

Dieses Mal bringe ich Ihnen die Vorsichtsmaßnahmen bei der Verwendung der CSS3-Animation-Sequenzanimation.

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

(1) Unendlicher Parameter, was bedeutet, 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;
}

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

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>

Der Grundstil des Symbols ist der gleiche wie beim vorherigen Schließen-Symbol. Der Unterschied besteht darin, dass die Symbole hier auf Inline-Block eingestellt sind Sie können horizontal angeordnet sein. 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: 'suningcloud';
    speak:none; /*使文本内容不能通过屏幕阅读器等辅助设备读取*/
    font-size:48px;
    display:block;
}

wird während der Initialisierung angezeigt, wie in der Abbildung unten gezeigt. Fügen Sie als Nächstes eine Animationsanimation zum Symbol hinzu um das Symbol um -100 % nach unten zu verschieben und dann wieder nach oben in die Ausgangsposition zu bringen. Während dieses Vorgangs ändert sich das Symbol gleichzeitig von vollständig transparent zu vollständig undurchsichtig

Das Die Animationseffekte der oben genannten 5 Symbole erfolgen alle gleichzeitig. 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:

Im obigen Code legen wir jeweils die Verzögerungszeit von 5 Symbolen fest. 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.

.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%);
    }
}

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

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. Die Wirkung von

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

PS: Es kann auch verwendet werden in der Animation Stellen Sie die Geschwindigkeitskurve wie eine Übergangsanimation ein

Zum Beispiel Implementierung: In diesem Beispiel hoffen wir, dass die Bewegung des Symbols einen kleinen elastischen Effekt hat, das heißt, wenn sich das Symbol nach oben bewegt, ist dies der Fall Verlangsamen Sie nicht und halten Sie am Endpunkt an, sondern fahren Sie nach Erreichen des Endpunkts fort. Bewegen Sie sich nach oben und bewegen Sie sich nach Überschreiten einer bestimmten Distanz in die entgegengesetzte Richtung zurück zum Endpunkt, wodurch ein Hin- und Herbewegungseffekt entsteht.

Natürlich können wir eine Frame-Animation verwenden, um einen solchen 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:

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

HTML und CSS zur Implementierung von Cornell Notes verwenden

Eine kurze Diskussion über die Layoutprobleme von CSS-Webseiten

Das obige ist der detaillierte Inhalt vonCSS3-Animationssequenzanimation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!