Tutorial zur Verwendung von CSS-Animationsanimationen

Jeder weiß, dass, egal um welches Projekt es sich handelt, im Frontend auf die Kompatibilität geachtet werden muss. Heute erzähle ich Ihnen von der Frage der Kompatibilitätsprüfung.

Wir wissen, dass wir, egal welches Front-End-Projekt wir durchführen, auf die Kompatibilität achten müssen. Deshalb zeigen wir Ihnen heute eine detaillierte Anleitung, welche Browser eine Kompatibilitätsprüfung erfordern.

Wir wissen, dass mit dem leistungsstarken CSS3 verschiedene Animationen und Spezialeffekte erstellt werden können, die Bilder, Flash-Animationen und JavaScript auf vielen Webseiten ersetzen können. Heute werde ich Ihnen @keyframes der CSS3-Regeln vorstellen

CSS3 @keyframes-Regeln

Um Animationen in CSS3 zu erstellen, müssen Sie die @keyframes-Regeln lernen.

@keyframes-Regeln werden zum Erstellen von Animationen verwendet. Durch Angabe eines CSS-Stils in @keyframes können Sie einen Animationseffekt erstellen, der schrittweise vom aktuellen Stil zum neuen Stil wechselt.

So verwenden Sie CSS-Animationen, um den Hintergrund und die Position zu ändern. Der Code lautet wie folgt:

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
 
@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
 
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
 
@-o-keyframes myfirst /* Opera */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

Ich glaube, Sie beherrschen die Methode Nachdem Sie diese Fälle gelesen haben, lesen Sie bitte andere verwandte Artikel auf der chinesischen PHP-Website.

Verwandte Lektüre:

Detaillierte Einführung von CSS3 zum Übersetzungsattribut

Detaillierte Einführung von CSS3 zum Hintergrundgrößenattribut

So verwenden Sie die CSS3-Funktion rotation()

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung von CSS-Animationsanimationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!