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

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

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

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

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!