Es gibt 5: 1. Attribut „Übergangseigenschaften“; 3. Attribut „Übergangszeitpunkt“; 5. Attribut „Übergangsverzögerung“;
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer. Der
css3-Übergang ermöglicht es uns, innerhalb einer begrenzten Zeit von einem Attributwert zu einem anderen zu wechseln.
Es gibt 5 Übergangsattribute in CSS3:
| Attribut | Beschreibung | CSS |
|---|---|---|
| Übergang | Abkürzungsattribut, mit dem vier Übergangsattribute in einem Attribut festgelegt werden. | 3 |
| transition-property | Gibt den Namen der CSS-Eigenschaft an, die den Übergang anwendet. | 3 |
| Übergangsdauer | Definieren Sie, wie lange der Übergangseffekt dauert. Der Standardwert ist 0. | 3 |
| transition-timing-function | gibt den zeitlichen Verlauf des Übergangseffekts an. Der Standardwert ist „einfach“. | 3 |
| transition-delay | Gibt an, wann der Übergangseffekt beginnt. Der Standardwert ist 0. | 3 Es gibt so viele Übergangscodes in div{}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
}
div:hover {
width: 200px;
}
</style>
</head>
<body>
<div></div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>
</body>
</html>Nach dem Login kopieren | Tatsächlich müssen Sie nur das abgekürzte Übergangsattribut verwenden und zwei Codezeilen verwenden, um es zu erhalten:
)
Das obige ist der detaillierte Inhalt vonWie viele Übergangseigenschaften gibt es in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
