CSS3 lehrt das Lernen der Animationsproduktion

CSS3-Animation

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 schrittweise vom aktuellen Stil zum neuen Stil wechselt.

Browser-Unterstützung

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

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 der Animationseffekt nicht erzeugt wird.

Eine Animation kann an einen Selektor gebunden werden, indem mindestens zwei der folgenden CSS3-Animationseigenschaften angegeben werden:

Angabe des Namens der Animation

Angabe der Dauer der Animation

Beispiel

Binden Sie die „myfirst“-Animation an das p-Element, Dauer: 5 Sekunden:

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

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

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 geben Sie den Zeitpunkt an, zu dem die Änderung eintritt, in Prozent 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 % erreicht hat, und ändern Sie sie dann erneut, wenn die Animation zu 100 % abgeschlossen ist:

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

Beispiel

Hintergrundfarbe und -position ändern:

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

CSS3-Animationseigenschaften

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

In den folgenden beiden Beispielen sind alle Animationseigenschaften festgelegt:

Instanzen

führen eine Animation mit dem Namen „myfirst“ aus, wobei alle Animationseigenschaften festgelegt sind:

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

Instanz

ist das gleiche wie die obige Animation, verwendet jedoch das abgekürzte Animationsattribut:

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

[Verwandte Empfehlungen]

1 Kostenloses CSS3-Video-Tutorial

2. Detaillierte Analyse neuer Funktionen in CSS3

3. Detaillierte Erläuterung der neuen Funktionen von CSS3

4. Empfohlene zehn CSS3-Animationsbeispiele

Teilen eine CSS3-Animationsbibliothek

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