Heim > Artikel > Web-Frontend > Lernen Sie CSS3-Animation (Animation)

Lernen Sie CSS3-Animation (Animation)

高洛峰Original: 2016-10-09 16:12:561132Durchsuche

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.

Zuerst muss ich etwas Hässliches sagen: 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.

<body>
    <div class="demo">
        我是demo    </div></body>

.demo{
    width: 120px;
    height: 120px;
    margin: 100px auto;
    background: url(img/demo.jpg) no-repeat;
}

Ein gewöhnliches DIV sieht wie rechts gezeigt aus: Lernen Sie CSS3-Animation (Animation)

Dann bewegen wir es

Schreiben Sie zuerst eine Methode und beschreiben Sie diese Methode wie sich dieses Bild bewegen soll

@keyframes run_animation{      
    from {
        transform: rotatez(0deg);
    }
    to {
        transform: rotatez(360deg);
    }
}

Dieser Animationslauf 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 kann unseren täglichen Entwicklungsbedarf oft nicht decken, daher gibt es auch diese Schreibmethode

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

Diese Beschreibung ermöglicht, dass die Animation reichhaltigere und coolere Aktionen hat. Die Dynamik des Elements in jeder Phase wird durch Prozentsätze beschrieben, wobei 0 % der oben genannte Wert und 100 % der Wert ist. Tatsächlich ist das ganz einfach, oder?

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

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

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 dies 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; der Methodendefinition Die Stile sind alle gleich. Wie folgt:

Nun, die Animation sollte sich zu diesem Zeitpunkt bewegen. Lassen Sie uns als Nächstes über die anderen Optionen in der Animation sprechen:

@keyframes run_animation{
    0%{
        transform: rotatez(90deg);
    }
    50%{
        transform: rotatez(90deg);
    }
   100%{
        transform: rotatez(90deg);
    }
}

1. Animation-Iteration-Count: Die Häufigkeit, mit der die Animation abgespielt wird. Geben Sie an, wie oft Sie sie abspielen möchten. Was ich hier unendlich oft verwendet habe, ist unendlich

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_animation

Stellungnahme：

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

Vorheriger Artikel：CSS-FloatNächster Artikel：CSS-Float

In Verbindung stehende Artikel

Mehr sehen