CSS3-Tutorial-Animation

Vielleicht haben Sie viele Techniken zur CSS3-Animation gesehen, darunter auch einige, die bereits zur Frontend-Entwicklung veröffentlicht wurden. Schauen Sie sich jetzt bitte das CSS3-Tutorial – Grundlagen der Animation an.

CSS3-Animationen:

Mit CSS3 können wir Animationen erstellen, die auf vielen Webseiten animierte Bilder, Flash-Animationen und JavaScript ersetzen können.

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 sich schrittweise vom aktuellen Stil zum neuen Stil ändert.

Browserunterstützung:

Internet Explorer 10, Firefox und Opera unterstützen @keyframes-Regeln und Animationseigenschaften.

Chrome und Safari erfordern das Präfix -webkit-.

Hinweis: Internet Explorer 9 und früher unterstützen keine @keyframe-Regeln oder Animationseigenschaften.

Instanz:

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

CSS3-Animation:

Wenn Sie eine Animation in @keyframes erstellen, binden Sie diese bitte an einen Selektor, da sonst keine Animationseffekte generiert werden.

Durch die Angabe mindestens der folgenden zwei CSS3-Animationseigenschaften können Sie die Animation an den Selektor binden:

1. Geben Sie den Namen der Animation an die Animationsdauer.

Beispiel:

Binden Sie die „myfirst“-Animation an ein div-Element, Dauer: 5 Sekunden:

Hinweis: Sie müssen den Namen und die Dauer des definieren Animation. Wenn die Dauer weggelassen wird, ist keine Animation zulässig, da der Standardwert 0 ist.

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}

Was ist Animation in CSS3?

Animation ist der Effekt der schrittweisen Änderung eines Elements von einem Stil zum anderen.

Sie können so viele Stile ändern, wie Sie möchten, so oft Sie möchten.

Bitte verwenden Sie Prozentsätze, um anzugeben, wann Änderungen auftreten, oder verwenden Sie die Schlüsselwörter „von“ und „bis“, die 0 % und 100 % entsprechen.

0 % ist der Beginn der Animation, 100 % ist der Abschluss der Animation.

Für eine optimale Browserunterstützung sollten Sie immer 0 %- und 100 %-Selektoren definieren.

Beispiel:

Ändern Sie die Hintergrundfarbe, wenn die Animation 25 % und 50 % beträgt, und ändern Sie sie dann erneut, wenn die Animation zu 100 % abgeschlossen ist:

Beispiel :

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

Hintergrundfarbe und -position ändern:

CSS3-Animationseigenschaften:

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

Die folgende Tabelle listet die @keyframes-Regeln und alle Animationseigenschaften auf:

Die folgenden zwei Beispiele legen alle Animationseigenschaften fest:

Beispiel:

Ausführen einer Animation namens myfirst mit allen festgelegten Animationseigenschaften:

Beispiel:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}

Gleich wie die obige Animation, aber unter Verwendung des abgekürzten Animationsattributs:

Das Obige ist der Inhalt der CSS3-Tutorial-Animation, verwandter Bitte beachten Sie Die Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}