CSS3 轉換速記屬性

transition 速記屬性允許我們在同一行中將 transition-property、transition-duration、transition-timing function 和 transition-delay 指定為轉換屬性的值 -

  • transition-duration - 指定轉換效果完成需要多少秒或毫秒

  • transition-property - 產生效果的屬性名稱

  • transition-timing function - 轉換的速度曲線

  • transition-delay - 以秒為單位設定轉換效果的延遲

記住，你需要同時設定應用該效果的 CSS 屬性和持續時間。

假設我們在滑鼠懸停時將形狀轉換為橢圓。為此，設定一個 div-

<div class="container">
   <div></div>
</div>

使用轉換對容器進行樣式設定-

.container div {
   width: 300px;
   height: 100px;
   border-radius: 1px;
   background-color: rgb(25, 0, 255);
   border: 2px solid red;
   transition: border-radius 2s ease 1s, background-color 2s ease-out 1s ;
}

轉換持續時間

上面將 border-radius 和 background-color 屬性的持續時間設定為 2 秒-

2s for the border-radius property
2s for the background-color property

轉換延遲

上面將延遲設定為 border-radius 和 background-color 屬性。 transition-delay 分別設定為 1 秒和 2 秒；

1s for the border-radius property
2s for the background-color property

轉換正時函式

上面將轉換設定為 border-radius 和 background-color 屬性。 transition-timing-function 設定為 -

ease for the border-radius
ease-out for the background-color property

懸停時，形狀將會變為橢圓，因為 border-radius 設定為 50。背景顏色也會改變-

container:hover div {
   background-color: orange;
   border-radius: 50%;
}

示例

下面是 CSS 中轉換速記屬性的程式碼 -

<!DOCTYPE html>
<html>
<head>
   <style>
      .container div {
         width: 300px;
         height: 100px;
         border-radius: 1px;
         background-color: rgb(25, 0, 255);
         border: 2px solid red;
         transition: border-radius 2s ease 1s, background-color 2s ease-out 1s ;
      }
      .container:hover div {
         background-color: orange;
         border-radius: 50%;
      }
   </style>
</head>
<body>
   <h1>Transition shorthand property</h1>
   <div class="container">
      <div></div>
   </div>
   <p>Hover over the above div to change its color and its shape to oval</hp>
</body>
</html>

更新時間： 31-Oct-2023

435 次瀏覽

開啟你的 職業生涯

完成課程即可獲得認證

開始使用
廣告