DAY17css轉場效果

2023 iThome 鐵人賽

DAY 17

Modern Web

網頁設計之旅系列第 17 篇

15th鐵人賽

y97213h53

團隊NUTC_IMAC_WEB_桑貝比

2023-10-02 23:38:47

180 瀏覽

分享至

當談到CSS轉場和動畫效果時，我們指的是使用CSS來為網頁元素添加過渡效果或動畫效果，以增強網站的互動性和視覺吸引力。這些效果可以使網站看起來更生動，吸引使用者的注意力。以下會介紹一些效果

轉場效果

轉場（Transition）是一種用於網頁開發中的 CSS 技術，它允許你在元素的狀態之間創建平滑的動畫效果，比如從一個樣式到另一個樣式的過渡。這種效果使網頁看起來更加流暢和具有吸引力。以下來介紹5個css轉場方式

transition-property（過渡屬性）

transition-property為指定要應用過渡效果的 CSS 屬性

<style>
    .element {
        width: 100px;
        height: 100px;
        background-color: blue;
        transition-property: width, background-color;
    }
    .element:hover {
        width: 200px;
        background-color: red;
    }
</style>
<body>
    <div class="element"></div>
    <p>將滑鼠移到方塊上以觸發過渡效果。</p>
</body>

transition-timing-function（過渡時間函數）

定義過渡效果的時間曲線，控制過渡過程中屬性值的變化速度。

<style>
.element {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s;
  transition-timing-function: ease-in-out; 
} 
.element:hover {
  width: 200px;
}
</style>
<body>
    <div class="element"></div>
    <p>將滑鼠移到方塊上以觸發過渡效果。</p>
</body>

transition-duration（過渡持續時間）

設定過渡效果的持續時間，以秒或毫秒為單位。

<style>
.element {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: width 2s; /* 僅設定寬度屬性的過渡，持續時間為 2 秒 */
}
.element:hover {
    width: 200px;
}
</style>
<body>
    <div class="element"></div>
    <p>將滑鼠移到方塊上以觸發過渡效果。</p>
</body>

transition-delay（過渡延遲）

指定在觸發過渡之後多久開始過渡效果。

.element {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s 0.5s;
}
.element:hover {
  width: 200px;
}
</style>
<body>
    <div class="element"></div>
    <p>將滑鼠移到方塊上以觸發過渡效果。</p>
</body>

transition（綜合屬性）

綜合了上述四個屬性，以簡化代碼

<style>
.element {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: width 1s ease-in-out 0.5s, background-color 1s ease-in-out 0.5s;
}
.element:hover {
    width: 200px;
    background-color: red;
}
</style>
<body>
    <div class="element"></div>
    <p>將滑鼠移到方塊上以觸發過渡效果。</p>
</body>