Heim >Web-Frontend >Front-End-Fragen und Antworten >So verwenden Sie die CSS-@keyframes-Regel
So verwenden Sie die CSS-@keyframes-Regel
- 青灯夜游Original
- 2019-05-30 16:25:523991Durchsuche
@keyframes ist eine CSS-Regel, mit der das Verhalten einer CSS-Animationsperiode definiert werden kann. Sie muss zusammen mit dem Animationsattribut verwendet werden, um einfache Animationseffekte zu erstellen. Verwenden Sie Animationseigenschaften, um das Erscheinungsbild von Animationen zu steuern und Animationen an Selektoren zu binden.
Wie verwende ich CSS-@keyframes-Regeln?
Animationen können über @keyframes-Regeln erstellt werden.
Syntax
@keyframes animationname {keyframes-selector {css-styles;}}Animationsname: erforderlich. Definiert den Namen der Animation.
keyframes-selector: erforderlich. Prozentsatz der Animationsdauer.
Zulässige Werte:
● 0-100 %
● von (wie 0 %)
● bis (wie 100 %) )
css-styles Erforderlich. Ein oder mehrere zulässige CSS-Stilattribute
Beschreibung:
Das Prinzip der Animationserstellung besteht darin, einen Satz von CSS-Stilen schrittweise in einen anderen Satz von Stilen umzuwandeln. Dieser Satz von CSS-Stilen kann während der Animation mehrmals geändert werden.
Geben Sie den Zeitpunkt an, zu dem die Änderung eintritt, als Prozentsatz oder über die Schlüsselwörter „von“ und „bis“, die 0 % und 100 % entsprechen. 0 % ist die Startzeit der Animation, 100 % ist die Endzeit der Animation. Für eine optimale Browserunterstützung sollten Sie immer 0 %- und 100 %-Selektoren definieren.
Hinweis: Bitte verwenden Sie die Animationseigenschaft, um das Erscheinungsbild der Animation zu steuern und die Animation an den Selektor zu binden.
css @keyframes-Attribut Beispiel
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body>
<p><strong>注意:</strong>@keyframes不兼容IE 9 and 以及更早版本的浏览器.</p>
<div></div>
</body>
</html>Rendering:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-@keyframes-Regel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!