Was ist die Verwendung von Keyframes in CSS3?-CSS-Tutorial-php.cn

Was ist die Verwendung von Keyframes in CSS3?

WBOY

Freigeben： 2021-12-15 17:36:10

Original

8323 Leute haben es durchsucht

Keyframes in CSS werden verwendet, um die Animationsaktionen von Elementen anzugeben. Es handelt sich um eine CSS-Regel zum Erstellen von Animationen; die Keyframe-Regel besteht aus dem Schlüsselwort „@keyframe“ und die Syntax lautet „@keyframes Animationsname{keyframes-selector{css“. -styles;} }".

Was ist die Verwendung von Keyframes in CSS3?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was ist die Verwendung von Keyframes in CSS3?

Dieses Attribut hängt eng mit dem Animationsattribut zusammen.

Keyframes bedeutet auf Chinesisch „Keyframes“. Wenn Sie Flash nicht kennen, sollten Sie dies natürlich besser verstehen.

Durch die Verwendung des Übergangsattributs kann auch der Übergangsanimationseffekt erzielt werden, dies ist jedoch etwas grob, da der Animationsprozess nicht genauer gesteuert werden kann. Beispielsweise kann der Übergang eines bestimmten Attributs insgesamt nur innerhalb eines bestimmten Zeitraums gesteuert werden Das Animationsattribut kann @keyframes verwenden, um die Animation innerhalb des angegebenen Zeitraums genauer zu unterteilen.

Grammatikstruktur:

@keyframes animationname {keyframes-selector {css-styles;}}

Nach dem Login kopieren

Parameteranalyse:

Animationsname: deklariert den Namen der Animation.

Keyframes-Selektor: Wird zum Teilen der Animationsdauer verwendet. Sie können die Prozentform oder die Form „von“ und „bis“ verwenden. Die Formen „von“ und „bis“ entsprechen 0 % und 100 %. Es wird empfohlen, immer die Prozentform zu verwenden.

Das Beispiel lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height:100px;
            background-color:pink;
            animation:fadenum 5s infinite;
        }
        @keyframes fadenum{
   100%{transform:rotate(360deg);}
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

Was ist die Verwendung von Keyframes in CSS3?

Bei Interesse können Sie weiterhin Folgendes besuchen: CSS-Video-Tutorial.

Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von Keyframes in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!