每當我們想要逐漸改變一個元素的樣式，從一種樣式過渡到另一種樣式，無論是透過使用者的互動或是透過停留在網站上的時間來實現。您可以使用動畫來在任何時間段內改變許多樣式。讓我們來看看您需要的動畫屬性。
關鍵影格− 這用於指定一個元素的動畫。它包含將發生在元素樣式上的變化。然後，元素從開始時的樣式移動到最後提到的樣式。
Animation-name − 這是用於引用動畫的，這樣您就不必每次新增動畫時都要指定規則。
動畫持續時間 − 這指定了動畫應用於元素的持續時間。它的初始值為0ms，可以無限期地進行。
Animation-iteration-count − 這確定了動畫將重複播放的次數。
動畫延遲 − 如果您需要將動畫延遲一段時間，可以使用此屬性。
動畫方向 − 這指定了動畫是需要向前方向、向後方向還是在兩個方向上交替進行。
動畫時間函數 − 當您希望動畫在開始、中間和結束時具有不同的時間間隔時，請使用此屬性。
我們也可以使用「animation」縮寫屬性，它由所有這些屬性組成。它適用於所有元素，但不可繼承。需要注意的是，在使用縮寫符號時，值的順序很重要，因為每個值根據其順序以不同的方式解釋。
在CSS中使用動畫的範例如下所示。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animations in CSS</title>
<style>
@keyframes example {
from {
background-color: maroon;
}
to {
background-color: plum;
}
}
div {
width: 500px;
height: 500px;
margin: 12.25%;
background-color: maroon;
animation-name: example;
animation-iteration-count: infinite;
animation-duration: 4s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
現在我們知道了CSS中的動畫是什麼，接下來我們將討論如何透過動畫來使div元素逐漸改變其寬度。
我們將使用transition屬性來解決這個問題。這個屬性用於為元素添加過渡效果。它是CSS中可用的一種簡寫屬性。
它定義了動畫發生時發生的過渡，元素從一個狀態變成另一個狀態。它適用於所有元素，且不可繼承。
以下屬性構成了縮寫過渡屬性。
Transition-delay − 這個屬性指定了瀏覽器在應用過渡屬性之前需要等待的時間。它的初始值為0，正值會使其等待更長時間，而負值會使過渡更快。
過渡持續時間 - 這設定了過渡效果可見的時間持續時間，在此持續時間之後，動畫結束。此屬性的預設值為0，因此預設動畫是不可見的。
Transition-property − 它設定將會套用過渡效果的元素。它可以有兩個可能的值，none和all。預設情況下，值設定為all，因此所有元素都套用了過渡效果，但none表示沒有任何元素具有該過渡效果。
Transition-timing-function −# 此屬性用於控制動畫開始、中間和結束時的過渡速度。初始值設定為ease，但CSS有許多預先定義的時間函數。
#我們可以在懸停狀態下設定過渡屬性，動畫將在懸停或使用活動偽類時觸發。我們也可以使用JS動態分配類，並使用它們來觸發過渡。
在CSS中使用transition屬性的一個簡單範例如下所示。
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
font-size: 14px;
transition: font-size 4s 1s;
}
a:hover {
font-size: 36px;
}
</style>
</head>
<body>
<a>This text will have its font modified on hover</a>
</body>
</html>
在執行上述程式時，將顯示一段文本，如果你將滑鼠懸停在上面，你可以看到文本的過渡效果。
我們現在將看到一個使用過渡來解決手邊問題的範例。
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: royalblue;
}
div {
width: 150px;
height: 200px;
background: linear-gradient(
0deg,
rgb(111, 190, 87) 20%,
rgb(119, 218, 119) 50%,
rgb(93, 81, 76) 98%
);
transition: width 2s;
}
.textCenter {
display: flex;
align-items: center;
justify-content: center;
}
div:hover {
width: 500px;
}
</style>
</head>
<body>
<h1>Example of using transition property to increase width gradually on hover.</h1>
<div class="textCenter">Please hover over here</div>
</body>
</html>
上述程式的輸出是一個div 盒子，其寬度在2秒內逐漸從150px變化到500px。
總之，使用CSS的hover選擇器逐漸改變分區元素的寬度是一種有效的方式，可以添加細微的動畫效果，而無需額外的程式碼。這在創建網頁中的互動元素（如按鈕和選單）時特別有用。只需幾行程式碼，您就可以創建動態效果，使您的頁面與眾不同。
以上是如何在CSS中透過懸停在一個分割元素上逐漸改變寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
