Implementierung der @keyframes-Animation in CSS3

In diesem Artikel werden hauptsächlich relevante Informationen zur einfachen Animationsimplementierung von CSS3 @keyframes vorgestellt. Der Inhalt ist ziemlich gut und wird als Referenz dienen.

CSS3 @keyframes einfache Animationsimplementierung

Definition:

Animationen können über @keyframes-Regeln erstellt werden.

Animationen werden erstellt, indem nach und nach ein Satz von CSS-Stilen in einen anderen geändert wird.

Dieser Satz von CSS-Stilen kann während des Animationsprozesses 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 immer 0 %- und 100 %-Selektoren definiert werden.

Wichtig: Kompatibilitätsproblem! @keyfrmes ist nicht kompatibel mit IE 9 und früheren Browsern.

Syntax:

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

Animationsname

Erforderlich. Definiert den Namen der Animation.

keyframes-selector

animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。 合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

Erforderlich. Der Prozentsatz der Animationsdauer.

Zulässige Werte:

• 0-100 %

• from( Gleiches als 0%)

• to (Das Gleiche wie 100%)

css -styles

Erforderlich. Eine oder mehrere zulässige CSS-Stileigenschaften.

@keyframes mymove
{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
    0%   {top:0px;}
    25%  {top:200px;}
    75%  {top:50px}
    100% {top:100px;}
}
//多个特性变化，用;隔开.

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

Verwenden Sie die mymove-Animationsmethode:

Selector

{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome， infinite表示无限次循环，也可设置次数n：
                                           animation-interation-count:n*/ 
}

Zusammenfassung: @keyframes sind eng mit der Animation verbunden. Wenn Sie sie gründlich beherrschen möchten, müssen Sie lernen, wie man Animationen zusammen verwendet.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website. Verwandte Empfehlungen:

Analyse der Medienabfragen von CSS3

Verwendung von CSS3 zur Implementierung von acht Gruppen supercooler Mäuse Slide Überbildanimation

Das obige ist der detaillierte Inhalt vonImplementierung der @keyframes-Animation in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!