Heim > Artikel > Web-Frontend > CSS3 – @keyframes
CSS3 – @keyframes
- 零下一度Original
- 2017-06-29 11:54:071518Durchsuche
Syntax
@keyframes animationname {keyframes-selector {css-styles;}}| 值 | 描述 |
| animationname | 必需。定义动画的名称。 |
| keyframes-selector |
必需。动画时长的百分比。 合法的值：
|
| css-styles | 必需。一个或多个合法的 CSS 样式属性。 |
Definition und Verwendung
Mit der @keyframes-Regel können Sie Animationen erstellen.
Animationen werden erstellt, indem nach und nach ein Satz von CSS-Stilen in einen anderen geändert wird.
Sie können diesen Satz von CSS-Stilen während der Animation mehrmals ändern.
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.
Browser-Unterstützung
Derzeit unterstützen Browser keine @keyframes-Regeln.
Firefox unterstützt alternative @-moz-Keyframes-Regeln.
Opera unterstützt alternative @-o-Keyframes-Regeln.
Safari und Chrome unterstützen alternative @-webkit-keyframes-Regeln.
Beispiel:
<!DOCTYPE html><html><head><style>
div{width:100px;height:100px;background:red;position:relative;animation:mymove 5s infinite;-moz-animation:mymove 5s infinite; /* Firefox */-webkit-animation:mymove 5s infinite; /* Safari and Chrome */-o-animation:mymove 5s infinite; /* Opera */}@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;}}
@-moz-keyframes mymove{ /* Firefox */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;}}
@-o-keyframes mymove {/* Opera */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><b>注释：</b>本例在 Internet Explorer 中无效。</p><div></div>
</body>
</html>
Das obige ist der detaillierte Inhalt vonCSS3 – @keyframes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!