Wenn sich der CSS-Eigenschaftswert ändert, aktualisiert der Browser normalerweise sofort den entsprechenden Stil. Wenn Sie beispielsweise mit der Maus über das Element fahren, wird der über den :hover-Selektor definierte Stil sofort auf das Element angewendet. Zu CSS3 wurde eine Übergangsfunktion hinzugefügt, mit der Sie Elemente innerhalb einer bestimmten Zeit reibungslos von einem Stil zum anderen übergehen können, ähnlich einer einfachen Animation, jedoch ohne Rückgriff auf Flash oder JavaScript.
CSS bietet fünf Eigenschaften im Zusammenhang mit dem Übergang:
Um einen Übergangseffekt erfolgreich umzusetzen, müssen zwei Dinge definiert werden:
(1) Eigenschaften von Parametern und Übergangseffekten in Elementen;
(2) Die Dauer des Übergangseffekts.
Tipp: Der Übergangseffekt tritt normalerweise auf, wenn die Maus über das Element fährt. Wenn die Übergangsdauer nicht festgelegt ist, wird der Übergangseffekt nicht wirksam, da der Standardwert der Übergangszeit 0 ist.
1. Übergangseigenschaft
Das Attribut „transition-property“ wird verwendet, um den Namen des Attributs im Element festzulegen, das am Übergang beteiligt ist. Das Syntaxformat lautet wie folgt:
Übergangseigenschaft:none|all|property;
Die Parameterbeschreibung lautet wie folgt:
keine: Gibt an, dass keine Attribute am Übergangseffekt beteiligt sind;
alle: Zeigt an, dass alle Attribute am Übergangseffekt beteiligt sind.
Eigenschaft: Definiert eine Liste von CSS-Eigenschaftsnamen, die Übergangseffekte anwenden. Verwenden Sie Kommas, um mehrere Eigenschaftsnamen zu trennen.
Der Beispielcode lautet wie folgt:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-p Roperty:width,background;}div:hover{width:200px;background-color:blue;}</style></head><body><div></div></body></html>Laufergebnisse:
2. Übergangsdauer
Das Attribut „transition-duration“ wird verwendet, um die Zeit festzulegen, die für den Übergang benötigt wird (in Sekunden oder Millisekunden). Die Syntax lautet wie folgt:
Übergangsdauer:Zeit;
Unter ihnen ist die Zeit die Zeit, die benötigt wird, um den Übergangseffekt abzuschließen (in Sekunden oder Millisekunden). Der Standardwert ist 0, was bedeutet, dass es keinen Effekt gibt.
Wenn am Übergang mehrere Attribute beteiligt sind, können Sie auch die Übergangszeit für diese Attribute nacheinander festlegen. Verwenden Sie Kommas, um mehrere Attribute zu trennen, z. B. Übergangsdauer: 1s, 2s, 3s;. Darüber hinaus können Sie über eine Zeit auch die für den Übergang benötigte Zeit für alle am Übergang beteiligten Eigenschaften festlegen. Der Beispielcode lautet wie folgt:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-property:width, Hintergrund;Übergangsdauer:.25s,1s;}div:hover{width:200px;Hintergrundfarbe:blau;}</style></head><body><div></div></body>< /html>3. Übergangs-Timing-Funktion
Das Attribut „transition-timing-function“ wird verwendet, um die Art der Übergangsanimation festzulegen. Die optionalen Werte des Attributs sind wie folgt:
4. Übergangsverzögerung
Das Attribut „transition-delay“ wird verwendet, um festzulegen, wann der Übergangseffekt beginnt. Das Syntaxformat des Attributs ist wie folgt:
Übergangsverzögerung: Zeit;
Unter anderem wird der Parameter time verwendet, um die Wartezeit festzulegen, bevor der Übergangseffekt beginnt, in Sekunden oder Millisekunden.
5. Übergang
Das Übergangsattribut ist die Abkürzung der oben genannten vier Attribute. Über dieses Attribut können die oben genannten vier Attribute gleichzeitig festgelegt werden. Das Syntaxformat der Attribute ist wie folgt.
Übergang:ÜbergangseigenschaftÜbergangsdauerÜbergangs-Timing-FunktionÜbergangsverzögerung;
Im Übergangsattribut sind „transition-property“ und „transition-duration“ erforderliche Parameter, und „transition-timing-function“ und „transition-delay“ sind optionale Parameter. Sie können weggelassen werden, wenn sie nicht erforderlich sind. Darüber hinaus können über das Übergangsattribut auch mehrere Gruppen von Übergangseffekten festgelegt werden. Jede Gruppe wird durch Kommas getrennt. Der Beispielcode lautet wie folgt: