Heim > Artikel > Web-Frontend > Welche Regeln müssen bei der Verwendung von CSS3-Animationen angewendet werden?
Welche Regeln müssen bei der Verwendung von CSS3-Animationen angewendet werden?
- (*-*)浩Original
- 2019-05-31 18:00:135569Durchsuche
CSS3 @keyframes-Regeln
Tag-Definition und Verwendungsanweisungen
Mit @keyframes-Regeln können Sie Animationen erstellen.
Erstellen Sie Animationen, indem Sie schrittweise von einer CSS-Stileinstellung zur anderen wechseln.
Sie können die CSS-Stileinstellungen während der Animation mehrmals ändern.
Geben Sie an, wann die Änderung erfolgt, indem Sie % oder die Schlüsselwörter „von“ und „bis“ verwenden, die mit 0 % bis 100 % identisch sind.
0 % bedeutet, dass die Animation beginnt, 100 % bedeutet, dass die Animation abgeschlossen ist. (Empfohlenes Lernen: CSS3-Video-Tutorial.)
Für eine optimale Browserunterstützung sollten Sie immer Selektoren für 0 % und 100 % definieren.
Hinweis: Verwenden Sie das Animationsattribut, um das Erscheinungsbild der Animation zu steuern, und verwenden Sie auch den Selektor, um die Animation zu binden. .
Syntax
@keyframes animationname {keyframes-selector {css-styles;}}
Wert
|
Beschreibung | ||||||||
Animationsname td>| Erforderlich. Definiert den Namen der Animation. |
| ||||||||
| keyframes-selector |
Erforderlich. Prozentsatz der Animationsdauer. Zulässige Werte: 0-100 %von (wie 0 %)bis (wie 100 %) Hinweis: Sie können eine Animation verwenden Keyframes-Selektoren. |
||||||||
| css-styles | Erforderlich. Ein oder mehrere zulässige CSS-Stilattribute
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3</title>
<style>
div
{
width:100px;
height:100px;
background:blue;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}
@keyframes mymove
{
0% {top:0px; background:blue; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:blue; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
</style>
</head>
<body>
<p><strong>注意:</strong> @keyframes 规则不兼容 IE 9 以及更早版本的浏览器.</p>
<div></div>
</body>
</html>Das obige ist der detaillierte Inhalt vonWelche Regeln müssen bei der Verwendung von CSS3-Animationen angewendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!