CSS 中具有多個屬性的過渡簡寫？
- WBOY轉載
- 2023-09-01 20:21:02971瀏覽
我們可以使用 CSS 新增過渡到 HTML 元素。在開始本教學之前，讓我們先了解什麼是過渡。基本上，轉換是元素從一種狀態變成另一種狀態。例如，當使用者將滑鼠懸停在元素上時，我們會更改元素的尺寸。
在 CSS 中，我們可以使用兩種方式來為元素添加過渡。首先是同時使用「transition-property」、「transition-duration」、「transition-timing-function」和「transition-delay」這四個屬性。第二種是僅使用「transition」CSS 屬性。
CSS「transition」屬性是以下 CSS 屬性的簡寫。
Transition-property - 它指定我們需要套用過渡效果的 CSS 屬性。如果我們需要對所有屬性套用轉換，我們可以使用「all」作為值。
Transition-duration - 過渡效果的總時間（以秒為單位）。
Transition-timing-function - 它決定轉換應如何進行。過渡計時函數的範例有「liner」、「ease-in」、「ease-out」、「ease-in-out」等。
Transition-delay - 這是過渡效果開始後的一段時間。
文法
使用者可以依照以下語法將過渡簡寫與多個 CSS 屬性一起使用。
element {
transition: Property duration timing-function delay;
}
在上面的語法中，第一個值是轉換屬性，第二個值是轉換持續時間，第三個值是計時函數，最後一個值是轉換延遲。
範例 1
在下面的範例中，我們有一個尺寸為 200 x 200 的 div 元素，並且我們在 div 元素的高度上添加了持續 2 秒的過渡效果。這裡，轉換延遲為0.5秒，計時功能為「ease-in-out」。
使用者可以將滑鼠停留在 div 元素上來觀察過渡效果。我們可以觀察到 div 元素的高度是平滑增加的，而不是立即增加的。
<html>
<head>
<style>
/* adding transition effect on the element */
.element {
width: 500px;
height: 200px;
background-color: red;
color: white;
font-size: 25px;
transition: height 2s ease-in-out 0.5s;
}
.element:hover {
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<h3>Using the <i> transition property </i> of CSS to add transition to the element</h3>
<div class = "element">
This div contains the texts.
<p> Hover over this div and wait to see the changes </p>
</div>
</body>
</html>
範例 2
在下面的範例中，div 元素的初始 margin-left 為 2px。當使用者將滑鼠懸停在 div 元素上時，我們將 margin-left 增加到 100px。我們在 div 元素的 margin-left CSS 屬性上新增了延遲 0.5 秒後持續 2 秒的過渡效果。
在輸出中，將滑鼠懸停在 div 元素上，該元素將在 2 秒內向右移動 100px。
<html>
<head>
<style>
/* adding transition effect on the element */
.element {
width: 200px;
height: 200px;
background-color: blue;
color: white;
font-size: 25px;
margin-left: 2px;
border-radius: 12px;
transition: margin-left 2s ease-in-out 0.5s;
}
.element:hover {
margin-left: 100px;
}
</style>
</head>
<body>
<h3> Using the <i> transition property </i> of CSS to add transition to the element </h3>
<p> Hover over the below div and wait to see the changes. </p>
<div class = "element">
This div contains the texts.
</div>
</body>
</html>
範例 3
在下面的範例中，我們為多個 CSS 屬性添加了過渡效果。在這裡，我們為「margin-left」、「height」、「width」、「background-color」、「color」和「font-size」CSS屬性添加了2秒的過渡效果。
在輸出中，使用者可以觀察到所有 CSS 屬性的轉換都很平滑。但是，我們可以使用「all」作為「transition-property」的值來為所有屬性新增過渡。
<html>
<head>
<style>
/* adding transition effect on the element */
.element {
width: 200px;
height: 200px;
background-color: blue;
color: white;
font-size: 25px;
margin-left: 2px;
border-radius: 12px;
transition: margin-left 2s, height 2s, width 2s, background-color 2s, color 2s, font-size 2s;
}
.element:hover {
margin-left: 100px;
height: 400px;
width: 400px;
background-color: aqua;
color: black;
font-size: 40px;
}
</style>
</head>
<body>
<h3> Using the <i> transition property </i> of CSS to add transition to the element </h3>
<p> Hover over the bellow div to see the achennges</p>
<div class = "element">
Square div element.
</div>
</body>
</html>
使用者學會了使用「transition」CSS 屬性，這是與過渡相關的多個 CSS 屬性的簡寫。在這裡，我們已經學會了在上面的三個範例中使用「transition」CSS屬性。在上一個範例中，我們為多個 CSS 屬性新增了過渡效果。
以上是CSS 中具有多個屬性的過渡簡寫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！