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;
}(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 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: 'suningcloud';
speak:none; /*使文本内容不能通过屏幕阅读器等辅助设备读取*/
font-size:48px;
display:block;
}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
.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. 
.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: 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 . 
.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;
}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!
