IT課程 CSS基礎 027_動畫與過渡

動畫

CSS 動畫是一種可用於使元素的屬性值逐漸變化的效果。動畫可以應用於任何 CSS 屬性，包括寬度、高度、顏色、背景、邊框等。

animation 屬性的語法如下：

name：指定動畫的名稱。
duration：指定動畫的持續時間。
timing-function：指定動畫的速度曲線。
delay：指定動畫的延遲。
iteration-count：指定動畫的播放次數。
direction：指定動畫的播放方向。
fill-mode：指定動畫在動畫完成後或在動畫被暫停或停止後元素的樣式。

示例：

1
    @keyframes animationName{
2
    from {
3
        transform: rotate(0deg);
4
      }
5
      to {
6
        transform: rotate(360deg);
7
        }
8
    }
9
    .example1{
10
    width: 100px;
11
      height: 100px;
12
      background-color: #3498db;
13
      animation: animationName 2s linear infinite; /* 應用動畫，持續2秒，無限循環，線性過渡 */
14
  }

1
    <div class="example1"></div>

效果：

示例效果

@keyframes rotate 定義了一個名為 rotate 的關鍵幀動畫，從初始狀態（0度旋轉）到結束狀態（360度旋轉）。
.animated-box 元素應用了這個動畫，通過 animation 屬性指定了動畫名稱、持續時間、循環方式等。

CSS 動畫和 CSS 過渡都是可用於使元素的屬性值逐漸變化的效果。兩者的主要區別在於：

動畫可以重複播放，而過渡只能播放一次。
動畫可以指定動畫的播放方向，而過渡不能。
動畫可以指定動畫在動畫完成後或在動畫被暫停或停止後元素的樣式，而過渡不能。

過渡

CSS 過渡是一種可用於使元素的屬性值逐漸變化的效果。過渡可以應用於任何 CSS 屬性，包括寬度、高度、顏色、背景、邊框等。過渡的效果可能會因瀏覽器和設備的不同而有所不同，過渡的性能可能會因過渡的複雜程度而有所不同。

示例：

1
    .example1{
2
        width: 200px;
3
        height: 200px;
4
        background-color: #3498db;
5
        transition: background-color 0.5s ease; /* 定義過渡屬性和時間 */
6
        }
7
    .example1:hover{
8
        background-color: #e74c3c;
9
        }

1
    <div class="example1"></div>

效果：

示例效果

動畫

過渡

評論