Heim >Web-Frontend >CSS-Tutorial >Was ist die Verwendung von Transition in CSS3?
Was ist die Verwendung von Transition in CSS3?
- WBOYOriginal
- 2021-12-21 16:56:292514Durchsuche
In CSS3 wird das Übergangsattribut zum Festlegen des Elementübergangseffekts verwendet. Es handelt sich um ein abgekürztes Attribut mit der Syntax „Übergang:Eigenschaftsdauer, Zeitfunktion, Verzögerung“. Der Attributwert legt den Attributnamen, die Zeit, die Geschwindigkeit und die Verzögerung fest Zeitpunkt des Elementübergangs.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
Wozu dient der Übergang in CSS3?
In CSS ist das Übergangsattribut „Übergang“, mit dem der Übergangseffekt eines Elements festgelegt wird. Das
transitärsattribut legt den Übergangseffekt des Elements fest.
- Sie werden verwendet, um den Attributnamen, die Übergangszeit, die Übergangsgeschwindigkeitskurve und die Übergangsverzögerungszeit des Elementübergangseffekts festzulegen. Die Syntax lautet:
transition: property duration timing-function delay;
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div></div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
</body>
</html>Ausgabeergebnis: CSS-Video-Tutorial
)Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von Transition in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- CSS3-Clip-Path-Eigenschaft in Aktion: dynamisches Zuschneiden von Bereichen
- Was sind die am häufigsten verwendeten grundlegenden CSS3-Selektoren?
- Was sind die wichtigsten Punkte des Box-Modells, die Sie in CSS kennen müssen (organisiert und geteilt)?
- Verwendung des CSS-Positionierungsattributs (ausführliche Erklärung mit Beispielen)
- Die am einfachsten zu verstehende ausführliche Erklärung des CSS-Float-Attributs (detaillierte Bilder und Text)