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

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 */
}

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

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!