Heim > Web-Frontend > CSS-Tutorial > Hauptteil

CSS3-Tutorial-Animation

黄舟
Freigeben: 2016-12-27 15:39:35
Original
1438 Leute haben es durchsucht

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-Tutorial-Animation

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:

CSS3-Tutorial-Animation


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;}
}
Nach dem Login kopieren

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 */
}
Nach dem Login kopieren

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;}
Nach dem Login kopieren

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;}
}
Nach dem Login kopieren

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

CSS3-Tutorial-AnimationDie 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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage