Heim >Web-Frontend >CSS-Tutorial >Informationen zur CSS3-Animation zum Erzielen eines Frame-für-Frame-Animationseffekts
Informationen zur CSS3-Animation zum Erzielen eines Frame-für-Frame-Animationseffekts
- 不言Original
- 2018-06-20 17:19:314634Durchsuche
In diesem Artikel wird hauptsächlich die CSS3-Animation vorgestellt, um einen Frame-für-Frame-Animationseffekt zu erzielen, der einen gewissen Referenzwert hat.
Das Animationsattribut in CSS3 ist sehr leistungsfähig, aber Sie können es verwenden Es ist relativ selten, ich wurde kürzlich in einem Interview danach gefragt. Ich werde eine kurze Zusammenfassung der Animation erstellen, solange ich noch Zeit habe. Gleichzeitig wird eine Demo der Frame-by-Frame-Animation als Übung implementiert
Liste der Animationsattribute
Da es viele Animationsattribute gibt, ist dies der Fall Es ist etwas schmerzhaft, es in w3c zu sehen, also habe ich es einfach gemacht Eine Karte, Sie können es deutlich sehen, wenn Sie es später überprüfen möchten
Animation verwenden Um eine Frame-für-Frame-Animation zu erreichen
Mach dich mit den Eigenschaften der Animation vertraut. Danach muss ich ein einfaches kleines Projekt finden, das ich umsetzen kann. Lasst uns loslegen Eines zuerst, um mich selbst zufriedenzustellen
Die Idee ist sehr einfach: Geben Sie dem Element einen Sprite-Hintergrund und fügen Sie dann die Rahmenanimation hinzu, um die Hintergrundposition zu ändern. Schlüsselcode:
@keyframes run{
from{
background-position: 0 0;
}
to{
background-position: -1540px 0 ;
}
}
p{
width:140px;
height:140px;
background: url(run.png) ;
animation-name：run;
animation-duration:1s;
animation-iteration-count:infinite;
} 
Aber nachdem wir es ausgeführt hatten, stellten wir fest, dass die Frame-Animation zwischen den einzelnen Frames der Animation gleitet, was nicht der gewünschte Effekt ist. Warum?
Es stellt sich heraus, dass Animationsübergänge standardmäßig im Erleichterungsmodus erfolgen, der zwischen jedem Schlüsselbild eine Tweening-Animation einfügt, sodass der Animationseffekt konsistent ist.
Es ist leicht zu lösen, wenn Sie den Grund kennen. Die Lösung ist:
@keyframes run{
0%, 8%{ /*动作一*/ }
9.2%, 17.2%{ /*动作二*/ }
...
}Schritt 1: Bleiben Sie 8 Frames zwischen den Aktionen, 0 % setzt Aktion eins, Aktion eins endet bei 8 %
Schritt 2: Übergang zwischen Aktionen für 1,2 Frames, 9,2 % setzt Aktion zwei, Aktion zwei Endete bei 17,2 %
Vollständiger Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3逐帧动画</title>
<style>
@keyframes run{
0%, 8%{ background-position: 0 0; }
9.2%, 17.2%{ background-position: -140px 0; }
18.4%, 26.4%{ background-position: -280px 0 ; }
27.6%, 35.6%{ background-position: -420px 0 ; }
36.8%, 44.8%{ background-position: -560px 0 ; }
46%, 54%{ background-position: -700px 0 ; }
55.2%, 63.2%{ background-position: -840px 0 ; }
64.4%, 72.4%{ background-position: -980px 0 ; }
73.6%, 81.6%{ background-position: -1120px 0 ; }
82.8%, 90.8%{ background-position: -1400px 0 ; }
92%, 100%{ background-position: -1540px 0 ; }
}
@-webkit-keyframes run{
0%, 8%{ background-position: 0 0; }
9.2%, 17.2%{ background-position: -140px 0; }
18.4%, 26.4%{ background-position: -280px 0 ; }
27.6%, 35.6%{ background-position: -420px 0 ; }
36.8%, 44.8%{ background-position: -560px 0 ; }
46%, 54%{ background-position: -700px 0 ; }
55.2%, 63.2%{ background-position: -840px 0 ; }
64.4%, 72.4%{ background-position: -980px 0 ; }
73.6%, 81.6%{ background-position: -1120px 0 ; }
82.8%, 90.8%{ background-position: -1400px 0 ; }
92%, 100%{ background-position: -1540px 0 ; }
}
p{
width:140px;
height:140px;
background: url(blog/754767/201606/754767-20160601000042992-1734972084.png) ;
animation:run 1s infinite;
-webkit-animation:run 1s infinite;
animation-fill-mode : backwards;
-webkit-animation-fill-mode : backwards;
}
</style>
</head>
<body>
<p></p>
</body>
</html>Es gibt eine andere Implementierungsmethode, nämlich die Verwendung von „steps()“, also der Schrittanimation dazwischen Frames, das ist nicht in w3c geschrieben, posten wir zuerst ein Bild
Wie aus dem obigen Bild ersichtlich ist:
Schritte(1 ,start): Animation 1 Sprung auf 100 % vom Anfang bis zum Ende dieses Frames (nicht des gesamten Zyklus)
steps(1,end): Behalten Sie den 0 %-Stil bis zum Ende dieses Frames bei (nicht den gesamten Zyklus). Zyklus)
Außerdem können Sie die Animations-Timing-Funktion direkt einstellen: Schrittstart/Schrittende
Der Schrittstarteffekt entspricht „steps(1,start)“, der Schrittendeffekt entspricht Schritte (1, Ende)
Endlich Der Effekt: Da das Aufnahmeproblem möglicherweise etwas verzögert ist, können interessierte Schüler den Code direkt kopieren und ausführen:
Vollständiger Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3逐帧动画</title>
<style>
@keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
@-webkit-keyframes run{
0%{
background-position: 0 0;
}
8.333%{
background-position: -140px 0;
}
16.666%{
background-position: -280px 0 ;
}
25.0%{
background-position: -420px 0 ;
}
33.333%{
background-position: -560px 0 ;
}
41.666%{
background-position: -700px 0 ;
}
50.0%{
background-position: -840px 0 ;
}
58.333%{
background-position: -980px 0 ;
}
66.666%{
background-position: -1120px 0 ;
}
75.0%{
background-position: -1260px 0 ;
}
83.333%{
background-position: -1400px 0 ;
}
91.666%{
background-position: -1540px 0 ;
}
100%{
background-position: 0 0 ;
}
}
p{
width:140px;
height:140px;
background: url(754767/201606/754767-20160601000042992-1734972084.png) ;
animation:run 1s steps(1, start) infinite;
-webkit-animation:run 1s steps(1, start) infinite;
}
</style>
</head>
<body>
<p></p>
</body>
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist die chinesische PHP-Website!
Verwandte Empfehlungen:
So verwenden Sie CSS3-Box-Reflect, um einen Reflexionseffekt zu erstellen
Über das Animationsattribut in CSS So verwenden Sie
Das obige ist der detaillierte Inhalt vonInformationen zur CSS3-Animation zum Erzielen eines Frame-für-Frame-Animationseffekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!