Heim > Artikel > Web-Frontend > Die CSS3-Animation implementiert eine Beispieleinführung für einen Frame-für-Frame-Animationseffekt

Die CSS3-Animation implementiert eine Beispieleinführung für einen Frame-für-Frame-Animationseffekt

高洛峰Original: 2017-03-09 17:11:001469Durchsuche

Dieser Artikel stellt hauptsächlich CSS3-Animationen vor, um Beispiele für Frame-für-Frame-Animationseffekte zu erzielen. Interessierte Freunde können darauf verweisen.

Das Animationsattribut in CSS3 ist sehr leistungsfähig, aber ich Benutze es selten. Ich wurde kürzlich in einem Interview danach gefragt. Ich werde eine kurze Zusammenfassung der Animation erstellen, sobald ich Zeit habe. Gleichzeitig wird eine Demo der Frame-by-Frame-Animation als Übung implementiert.

Liste der Animationsattribute

Da es viele Animationsattribute gibt, ist dies der Fall Es ist etwas schmerzhaft, es in w3c zu sehen, also habe ich es einfach gemacht Eine Karte, Sie können es auf einen Blick sehen, wenn Sie es später überprüfen möchten

CSS3 animation实现逐帧动画效果示例介绍

Verwenden Sie Animationen, um eine Frame-für-Frame-Animation zu erzielen

Machen Sie sich mit den Eigenschaften der Animation vertraut. Danach muss ich ein einfaches kleines Projekt finden, das ich umsetzen kann. Frame-für-Frame-Animation ist so interessant. Lassen Sie uns zuerst eines ausführen, um mich selbst zufriedenzustellen.
Die Idee ist sehr einfach: Geben Sie dem Element einen Sprite-Hintergrund und fügen Sie dann die Rahmenanimation hinzu, um die Hintergrundposition zu ändern. Schlüsselcode:

@keyframes run{   
    from{   
        background-position: 0 0;   
    }   
    to{   
        background-position: -1540px 0 ;   
    }   
}   
p{   
    width:140px;   
    height:140px;   
    background: url(run.png) ;   
    animation-name：run;   
    animation-duration:1s;   
    animation-iteration-count:infinite;   
}

CSS3 animation实现逐帧动画效果示例介绍

Aber nachdem wir es ausgeführt hatten, stellten wir fest, dass die Frame-Animation zwischen den einzelnen Frames der Animation verschiebbar ist und nicht den gewünschten Effekt hat. Warum?
Es stellt sich heraus, dass Animationsübergänge standardmäßig im Erleichterungsmodus erfolgen, der zwischen jedem Schlüsselbild eine Tweening-Animation einfügt, sodass der Animationseffekt konsistent ist.
Es ist leicht zu lösen, wenn Sie den Grund kennen. Die Lösung ist:

@keyframes run{   
    0%, 8%{  /*动作一*/  }   
    9.2%, 17.2%{  /*动作二*/  }   
    ...   
}

Schritt 1: Bleiben Sie 8 Frames zwischen den Aktionen, setzen Sie Aktion eins auf 0 %, beenden Sie Aktion eins auf 8 %

Schritt 2: Übergang zwischen Aktionen für 1,2 Frames , 9,2 % setzt Aktion zwei und Aktion zwei endet bei 17,2 %

Vollständiger Code:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>css3逐帧动画</title>  
    <style>  
    @keyframes run{   
    0%, 8%{  background-position: 0 0;  }   
    9.2%, 17.2%{  background-position: -140px 0;  }   
    18.4%, 26.4%{  background-position: -280px 0 ;  }   
    27.6%, 35.6%{  background-position: -420px 0 ;  }   
    36.8%, 44.8%{  background-position: -560px 0 ;  }   
    46%, 54%{  background-position: -700px 0 ;  }   
    55.2%, 63.2%{  background-position: -840px 0 ;  }   
    64.4%, 72.4%{  background-position: -980px 0 ;  }   
    73.6%, 81.6%{  background-position: -1120px 0 ;  }   
    82.8%, 90.8%{  background-position: -1400px 0 ;  }   
    92%, 100%{  background-position: -1540px 0 ;  }   
    }   
    @-webkit-keyframes run{   
    0%, 8%{  background-position: 0 0;  }   
    9.2%, 17.2%{  background-position: -140px 0;  }   
    18.4%, 26.4%{  background-position: -280px 0 ;  }   
    27.6%, 35.6%{  background-position: -420px 0 ;  }   
    36.8%, 44.8%{  background-position: -560px 0 ;  }   
    46%, 54%{  background-position: -700px 0 ;  }   
    55.2%, 63.2%{  background-position: -840px 0 ;  }   
    64.4%, 72.4%{  background-position: -980px 0 ;  }   
    73.6%, 81.6%{  background-position: -1120px 0 ;  }   
    82.8%, 90.8%{  background-position: -1400px 0 ;  }   
    92%, 100%{  background-position: -1540px 0 ;  }   
    }   
    p{   
        width:140px;   
        height:140px;   
        background: url(blog/754767/201606/754767-20160601000042992-1734972084.png) ;   
        animation:run 1s infinite;   
            -webkit-animation:run 1s infinite;   
        animation-fill-mode : backwards;   
            -webkit-animation-fill-mode : backwards;   
    }   
    </style>  
</head>  
<body>  
    <p></p>  
</body>  
</html>

Es gibt eine andere Implementierungsmethode, nämlich die Verwendung von Schritten( ), das ist Schrittanimation zwischen Frames, dies ist nicht in w3c geschrieben, poste zuerst ein Bild

CSS3 animation实现逐帧动画效果示例介绍

Wie aus dem obigen Bild ersichtlich ist:

Schritte (1,Start): Vom Anfang der Animation bis zum Ende dieses Frames auf 100 % springen (nicht den gesamten Zyklus)
Schritte (1,Ende): Behalten Sie den 0 %-Stil bis zum Ende dieses Frames bei (nicht der gesamte Zyklus)

Darüber hinaus können Sie die Animations-Timing-Funktion auch direkt festlegen: Schrittstart/Schrittende
Der Schrittstart-Effekt entspricht den Schritten (1,Start) , und der Schritt-End-Effekt entspricht Schritten (1, Ende)

Endeffekt: Da das Aufzeichnungsproblem möglicherweise etwas verzögert ist, können interessierte Schüler den Code direkt kopieren und ausführen:

Vollständiger Code:

<!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>css3逐帧动画</title>  
        <style>  
        @keyframes run{   
            0%{   
                background-position: 0 0;   
            }   
            8.333%{   
                background-position: -140px 0;   
            }   
            16.666%{   
                background-position: -280px 0 ;   
            }   
            25.0%{   
                background-position: -420px 0 ;   
            }   
            33.333%{   
                background-position: -560px 0 ;   
            }   
            41.666%{   
                background-position: -700px 0 ;   
            }   
            50.0%{   
                background-position: -840px 0 ;   
            }   
            58.333%{   
                background-position: -980px 0 ;   
            }   
            66.666%{   
                background-position: -1120px 0 ;   
            }   
            75.0%{   
                background-position: -1260px 0 ;   
            }   
            83.333%{   
                background-position: -1400px 0 ;   
            }   
            91.666%{   
                background-position: -1540px 0 ;   
            }   
            100%{   
                background-position: 0 0 ;   
            }   
        }   
        @-webkit-keyframes run{   
            0%{   
                background-position: 0 0;   
            }   
            8.333%{   
                background-position: -140px 0;   
            }   
            16.666%{   
                background-position: -280px 0 ;   
            }   
            25.0%{   
                background-position: -420px 0 ;   
            }   
            33.333%{   
                background-position: -560px 0 ;   
            }   
            41.666%{   
                background-position: -700px 0 ;   
            }   
            50.0%{   
                background-position: -840px 0 ;   
            }   
            58.333%{   
                background-position: -980px 0 ;   
            }   
            66.666%{   
                background-position: -1120px 0 ;   
            }   
            75.0%{   
                background-position: -1260px 0 ;   
            }   
            83.333%{   
                background-position: -1400px 0 ;   
            }   
            91.666%{   
                background-position: -1540px 0 ;   
            }   
            100%{   
                background-position: 0 0 ;   
            }   
        }   
        p{   
            width:140px;   
            height:140px;   
            background: url(754767/201606/754767-20160601000042992-1734972084.png) ;   
            animation:run 1s steps(1, start) infinite;   
                -webkit-animation:run 1s steps(1, start) infinite;   
        }   
        </style>  
    </head>  
    <body>  
        <p></p>  
    </body>

CSS3 animation实现逐帧动画效果示例介绍

Ich hoffe, dass es für alle hilfreich ist Ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Das obige ist der detaillierte Inhalt vonDie CSS3-Animation implementiert eine Beispieleinführung für einen Frame-für-Frame-Animationseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Teilen Sie eine Zusammenfassung der Implementierung des zweispaltigen CSS-LayoutsNächster Artikel：Teilen Sie eine Zusammenfassung der Implementierung des zweispaltigen CSS-Layouts

In Verbindung stehende Artikel

Mehr sehen