Lernen Sie CSS3-Animation (Animation)-HTML-Tutorial-php.cn

Lernen Sie CSS3-Animation (Animation)

WBOY

Freigeben： 2016-09-30 09:23:10

Original

1216 Leute haben es durchsucht

CSS3 verfügt über viele erweiterte Funktionen, wie 3D-Effekte, Animationen, mehrere Spalten usw. Heute werde ich einen Artikel schreiben, um aufzuzeichnen, wie man eine Animation mit CSS3 schreibt.

Beginnen wir mit den hässlichen Worten. IE9 und niedrigere Versionen unterstützen keine CSS3-Animation (wenn Sie sie wirklich implementieren möchten, können Sie die Verwendung von js in Betracht ziehen, aber der Effekt ist nicht sehr gut). Chrome und Safafi empfehlen das Hinzufügen des Präfixes -webkit- für die Abwärtskompatibilität mit älteren Versionen.

Heute werde ich einfach eine Animation erstellen.

Zeichnen Sie zunächst einfach ein Div und fügen Sie dann ein Hintergrundbild hinzu.

<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="demo"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
        我是demo
    </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

Nach dem Login kopieren

<span style="color: #800000;">.demo</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 100px auto</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> url(img/demo.jpg) no-repeat</span>;
}

Nach dem Login kopieren

Ein normaler DIV wird angezeigt, wie rechts gezeigt:

Dann lass es uns bewegen

Schreiben Sie zunächst eine Methode, die beschreibt, wie sich dieses Bild bewegen soll

<span style="color: #800000;">@keyframes run_animation</span>{      <span style="color: #ff0000;">
    from {
        transform</span>:<span style="color: #0000ff;"> rotatez(0deg)</span>;
    }<span style="color: #800000;">
    to </span>{<span style="color: #ff0000;">
        transform</span>:<span style="color: #0000ff;"> rotatez(360deg)</span>;
    }<span style="color: #800000;">
}</span>

Nach dem Login kopieren

This animation_run ist der Name dieser Methode. Sie müssen den Namen später dem relevanten Element zuordnen.

from beschreibt den Startzustand der Animation und to ist der Endzustand der Animation.

Diese Methode besteht also darin, ein Element um 360 Grad im Uhrzeigersinn zu drehen, was sehr einfach ist.

von bis oft können wir unseren täglichen Entwicklungsbedarf nicht decken, daher gibt es auch diese Schreibweise

@keyframes run_animation{
    0%{<br />　　　　 transform:rotatex(0deg);<br />　　 }
    16%{
        transform: rotatey(-90deg);
    }
    33%{
        transform: rotatey(-90deg) rotatez(135deg);
    }
    50%{
        transform: rotatey(225deg) rotatez(135deg);
    }
    66%{
        transform: rotatey(135deg) rotatex(135deg);
    }
    83%{
        transform: rotatex(135deg);
    }<br />　　100%{<br />　　　　 transform: rotatex(0deg);<br />　　}
}

Nach dem Login kopieren

Diese Beschreibung ermöglicht der Animation reichhaltigere und coolere Aktionen. Die Dynamik des Elements in jeder Phase wird durch Prozentsätze beschrieben, wobei 0 % der oben genannte Wert und 100 % der Wert ist. Eigentlich ist das ganz einfach, nicht wahr~

Die Animation ist so einfach zu schreiben. Als nächstes hängen wir die Animation an unser Bild an.

<span style="color: #800000;">.demo</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 100px auto</span>;<span style="color: #ff0000;">
    animation</span>:<span style="color: #0000ff;"> run_animation 12s linear infinite</span>; /*关联动画名称，定义动画时长，动画播放速度曲线，播放次数*/<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> url(img/demo.jpg) no-repeat 100%</span>;
}

Nach dem Login kopieren

Mit einem so einfachen Code kann das Bild gemäß der von uns definierten Methode verschoben werden.

Wenn Sie feststellen, dass sich die Animation jetzt nicht bewegt, kann das einen der folgenden Gründe haben:

1. Der Animationsname stimmt nicht mit dem durch @keyframes definierten Namen überein

2. Die Wiedergabedauer der Animation ist nicht definiert. Der Standardwert ist 0S, was bedeutet, dass keine Animation abgespielt wird. Der obige Code definiert 12S;

3. Führen Sie diesen Code in IE9 und niedrigeren Browsern aus. IE9 und niedriger unterstützen keine CSS3-Animation

4. Die Animationsmethode ist falsch definiert und der Stil ist in jeder Phase der Methodendefinition derselbe. Wie unten

Okay, jetzt sollte sich die Animation bewegen. Lassen Sie uns über andere Optionen in der Animation sprechen:

<span style="color: #800000;">@keyframes run_animation</span>{<span style="color: #ff0000;">
    0%{
        transform</span>:<span style="color: #0000ff;"> rotatez(90deg)</span>;
    }<span style="color: #800000;">
    50%</span>{<span style="color: #ff0000;">
        transform</span>:<span style="color: #0000ff;"> rotatez(90deg)</span>;
    }<span style="color: #800000;">
   100%</span>{<span style="color: #ff0000;">
        transform</span>:<span style="color: #0000ff;"> rotatez(90deg)</span>;
    }<span style="color: #800000;">
}</span>

Nach dem Login kopieren

1.animation-iteration-count: Die Häufigkeit, mit der die Animation abgespielt wird. Geben Sie an, wie oft Sie sie abspielen möchten. Ich habe hier unendlich viele Male verwendet, was unendlich ist

2.Animations-Timing-Funktion: Animationsgeschwindigkeitskurve. Diese Geschwindigkeitskurve ist etwas kompliziert und beinhaltet eine Bessel-Funktion. Wenn Sie Bézier nicht eingehend erkunden möchten, verwenden Sie einfach die vorgefertigten linearen Funktionen „ease“, „ease-in“, „ease-out“ und „ease-in-out“. Wenn Sie Bezier kennen, können Sie „Cubic-Bezier(n,n,n,n)“ verwenden. Dies ist fortgeschrittener und meiner Meinung nach ein leistungsstarkes Werkzeug in der Angeberwelt.

3.animation-delay: Animationen können mit Verzögerung abgespielt werden, und der Parameter ist ebenfalls n S. Im Gegensatz zur Animationsdauer ist die Animationsdauer die Dauer der Animationswiedergabe.

Die oben genannten Attribute können als Animation abgekürzt werden, genau wie meine Kastanie oben.

Ich werde die Eigenschaften der umgekehrten Wiedergabe und Pause nicht erwähnen. Bei Bedarf können Sie zu http://www.w3school.com.cn/css3/css3_animation.asp oder

gehen

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

Wenn Sie noch Fragen oder Vorschläge haben, können Sie uns gerne weitere Informationen mitteilen. Der Schreibstil ist begrenzt und das Talent ist oberflächlich. Bitte teilen Sie mir das Ende mit 🎜>