Heim > Web-Frontend > CSS-Tutorial > Stellen Sie die Unterschiede zwischen CSS3-Übergang und Animation vor

Stellen Sie die Unterschiede zwischen CSS3-Übergang und Animation vor

PHPz
Freigeben: 2017-04-02 10:19:20
Original
3616 Leute haben es durchsucht

CSS3-Übergang

Wenn wir in CSS3 einen bestimmten Effekt von einem Stil zu einem anderen hinzufügen können, ist es nicht erforderlich, FlashAnimation oder JavaScript zu verwenden. Bewegen Sie die Maus über das folgende Element:

Mit anderen Worten: Wenn wir nach dem Festlegen des Elementübergangs plötzlich das -Attribut des Elements ändern, erfolgt ein langsamer Übergang zu

Fügen Sie die folgende Methode hinzu: Wenn sich die Elementbreite plötzlich ändert, ändert sie sich nach 2 Sekunden auf den von Ihnen geänderten Wert

div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
Nach dem Login kopieren

CSS3-Animation

CSS3, die wir erstellen können Animation. Es kann viele animierte Webseiten-Bilder, Flash-Animationen und JAVAScripts ersetzen.

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
  
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}
Nach dem Login kopieren

Animation ist ein voreingestellter Animationsprozess, und CSS3 führt ihn entsprechend diesem Prozess aus.

Das obige ist der detaillierte Inhalt vonStellen Sie die Unterschiede zwischen CSS3-Übergang und Animation vor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage