CSS保健室｜animation

#css #css保健室 #animation #@keyframes #animation-name #animation-duration #animation-timing-function #animation-delay #animation-iteration-count #animation-direction #animation-play-state #animation-fill-mode

Posted by itiswonderfall on 2021-11-18

前言

animation 可以簡單的實現網頁動畫，隨著 CSS3 的發布，動畫也已經被加入到了標準之中，可以在許多網頁中取代動畫圖片、 Flash 動畫以及 JavaScript 。

針對懶人，其實還有偷吃步

如果不想自己 coding，想藉助一些工具來做動畫，可以參考使用 CSS 3.0 Maker！

 

 

animation 有很多屬性，接著一一來介紹

屬性 說明
@keyframes 定義一個動畫樣式。
animation 簡寫屬性，設置六個動畫屬性。
animation-name 為 @keyframes 動畫規定名稱。
animation-duration 定義動畫完成一個週期所需要的時間，以 s 或 ms 計，一定要記得規定此屬性，否則時長為 0 ，就不會播放動畫了。
animation-timing-function 定義動畫的速度曲線。
animation-delay 定義動畫會延遲幾秒後才進行，值以 s 或 ms 計。
animation-iteration-count 定義動畫的播放次數。
animation-direction 定義是否要輪流反向播放動畫。
animation-play-state 定義動畫要運行還是暫停。
animation-fill-mode 定義動畫在播放前或後，其動畫效果是否可見。

 

 

@keyframes

在一個 @keyframes 代碼塊裡，包含著一系列的 CSS 規則，統稱為 keyframes 。一個 keyframe 定義了一個完整動畫裡某一時刻的一種動畫樣式，動畫繪製引擎會連貫平滑的實現各種樣式間的轉換。

@keyframes animationName {
    from {
        left: 0px;
    }
    to {
        left: 200px;
    }
}

animationName 就是 animation-name，將其與動畫目標元素關聯起來，而 from 跟 to 各自為動畫的起始與終止狀態，分別可用 0% 和 100% 取代，如下方程式碼。

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

Firefox 支持替代的 @-moz-keyframes 規則， Opera 支持替代的 @-o-keyframes 規則， Safari 和 Chrome 支持替代的 @-webkit-keyframes 規則，所以編寫 keyframes 還要另外再加上三個前綴的寫法。

@-moz-keyframes animationName {
    0% {margin-top: 0px;background-color: red;}
    100% {margin-top: 100px;background-color: blue;}
}
@-o-keyframes animationName {
    0% {margin-top: 0px;background-color: red;}
    100% {margin-top: 100px;background-color: blue;}
}
@-webkit-keyframes animationName {
    0% {margin-top: 0px;background-color: red;}
    100% {margin-top: 100px;background-color: blue;}
}
@keyframes animationName {
    0% {margin-top: 0px;background-color: red;}
    100% {margin-top: 100px;background-color: blue;}
}

最後用 CSS 去綁定我們所編寫的 keyframes 。

div {
    width: 100px;
    height: 100px;
    animation: animationName 3s ease 0s infinite alternate;
}

 

 

animation

animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：

屬性 說明
animation-name 為 @keyframes 動畫規定名稱。
animation-duration 定義動畫完成一個週期所需要的時間，以 s 或 ms 計，一定要記得規定此屬性，否則時長為 0 ，就不會播放動畫了。
animation-timing-function 定義動畫的速度曲線。
animation-delay 定義動畫會延遲幾秒後才進行，值以 s 或 ms 計。
animation-iteration-count 定義動畫的播放次數。
animation-direction 定義是否要輪流反向播放動畫。

animation 把動畫屬性全部濃縮。

div {
    animation: name / duration / timing-function / delay / iteration-count / direction;
}

若要好維護的話則是參考下方寫法。

div {
    animation-name: animationName;
    animation-duration: 3s;
    anmation-timing-function: ease;
    anmation-delay: 0s;
    anmation-iteration-count: infinite;
    anmation-direction: alternate;
}

舊版本 Firefox 支持替代的 -moz-animation 規則， Safari 和 Chrome 支持替代的 -webkit-animation 屬性。

div {
    -moz-animation: animationName 3s ease 0s infinite alternate;
    -webkit-animation: animationName 3s ease 0s infinite alternate;
    animation: animationName 3s ease 0s infinite alternate;
}

 

 

animation-name

animation-name 屬性為 @keyframes 動畫規定名稱。

div {
    -moz-animation-name: animationName;
    -o-animation-name: animationName;
    -webkit-animation-name: animationName;
    animation-name: animationName;
}

Firefox 支持替代的 -moz-animation-name 規則， Opera 支持替代的 -o-animation-name 屬性， Safari 和 Chrome 支持替代的 -webkit-animation-name 屬性。

 

 

animation-duration

animation-duration 屬性定義動畫完成一個週期所需要的時間，以 s 或 ms 計。

div {
    -moz-animation-duration: 3s;
    -o-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}

Firefox 支持替代的 -moz-animation-duration 屬性， Opera 支持替代的 -o-animation-duration 屬性， Safari 和 Chrome 支持替代的 -webkit-animation-duration 屬性。

 

 

animation-timing-function

規定動畫的速度曲線。

值 描述
linear 動畫從頭到尾的速度是相同的。
ease 默認值，動畫以低速開始然後加快，在結束前變慢。
ease-in 動畫以低速開始。
ease-out 動畫以低速結束。
ease-in-out 動畫以低速開始和結束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。

Firefox 支持替代的 -moz-animation-timing-function 屬性， Opera 支持替代的 -o-animation-timing-function 屬性， Safari 和 Chrome 支持替代的 -webkit-animation-timing-function 屬性。

@keyframes animationName {
    0% {background-color: #888;margin-left: 0px;}
    100% {background-color: #000;margin-left: 200px;}
}
.linear {
    -moz-animation: animationName 3s linear 0s infinite;
    -o-animation: animationName 3s linear 0s infinite;
    animation: animationName 3s linear 0s infinite;
}
.ease {
    -moz-animation: animationName 3s linear 0s infinite;
    -o-animation: animationName 3s linear 0s infinite;
    animation: animationName 3s ease 0s infinite;
}
.ease-in {
    -moz-animation: animationName 3s linear 0s infinite;
    -o-animation: animationName 3s linear 0s infinite;
    animation: animationName 3s ease-in 0s infinite;
}
.ease-out {
    -moz-animation: animationName 3s linear 0s infinite;
    -o-animation: animationName 3s linear 0s infinite;
    animation: animationName 3s ease-out 0s infinite;
}
.ease-in-out {
    -moz-animation: animationName 3s linear 0s infinite;
    -o-animation: animationName 3s linear 0s infinite;
    animation: animationName 3s ease-in-out 0s infinite;
}

 

 

animation-delay

animation-delay 屬性定義動畫會延遲幾秒後才進行，值以 s 或 ms 計。

div {
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

Firefox 支持替代的 -moz-animation-delay 屬性， Opera 支持替代的 -o-animation-delay 屬性， Safari 和 Chrome 支持替代的 -webkit-animation-delay 屬性。

@keyframes animationName {
    0% {margin-left: 0px;}
    100% {margin-left: 200px;}
}
.red {
    background-color: red;
    -moz-animation-delay: -3s;
    -o-animation-delay: -3s;
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
}
.green {background-color: green;}
.brown {
    background-color: brown;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
div {
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
    -moz-animation: animationName 5s linear 1;
    -o-animation: animationName 5s linear 1;
    animation: animationName 5s linear 1;
}

 

 

animation-iteration-count

animation-iteration-count 屬性定義動畫的播放次數。

值 描述
n 定義動畫播放次數的數值。
infinite 規定動畫應該無限次播放。

Firefox 支持替代的 -moz-animation-iteration-count 屬性， Opera 支持替代的 -o-animation-iteration-count 屬性， Safari 和 Chrome 支持替代的 -webkit-animation-iteration-count 屬性。

div {
    -moz-anmation-iteration-count: infinite;
    -o-anmation-iteration-count: infinite;
    -webkit-anmation-iteration-count: infinite;
    anmation-iteration-count: infinite;
}

 

 

animation-direction

animation-direction 屬性定義是否應該輪流反向播放動畫。

值 描述
normal 默認值，動畫正常播放。
reverse 動畫反向播放。
alternate 動畫會在奇數次數（ 1、3、5 等等 ）正常播放，而在偶數次數（ 2、4、6 等等 ）向後播放。
alternate-reverse 動畫先向後播放再正常播放。

Firefox 支持替代的 -moz-animation-direction 屬性， Opera 支持替代的 -o-animation-direction 屬性， Safari 和 Chrome 支持替代的 -webkit-animation-direction 屬性。

@keyframes animationName {
    0% {margin-left: 0px;}
    100% {margin-left: 200px;}
}
div {
    -moz-animation: animationName 5s linear infinite;
    -o-animation: animationName 5s linear infinite;
    animation: animationName 5s linear infinite;
    -moz-animation-direction: alternate;
    -o-animation-direction: alternate;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

 

 

animation-play-state

animation-play-state 屬性規定動畫正在運行還是暫停。

值 描述
paused 規定動畫已暫停。
running 默認值，規定動畫正在播放。

Firefox 支持替代的 -moz-animation-play-state 屬性， Opera 支持替代的 -o-animation-play-state 屬性， Safari 和 Chrome 支持替代的 -webkit-animation-play-state 屬性。

@keyframes animationName {
    0% {margin-left: 0px;}
    100% {margin-left: 200px;}
}
.red {background-color: red;}
.green {background-color: green;}
.brown {background-color: brown;}
div {
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
    -moz-animation: animationName 5s linear infinite;
    -o-animation: animationName 5s linear infinite;
    animation: animationName 5s linear infinite;
    -moz-animation-direction: alternate;
    -o-animation-direction: alternate;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    -webkit-animation-play-state: running;
    animation-play-state: running;
}
div:hover {
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

 

 

animation-fill-mode

animation-fill-mode 屬性規定動畫在播放之前或之後，其動畫效果是否可見。

值 描述
none 默認值，不改變動畫行為。
forwards 當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。
backwards 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。
both 向前和向後填充模式都被應用。

Firefox 支持替代的 -moz-animation-fill-mode 屬性， Opera 支持替代的 -o-animation-fill-mode 屬性， Safari 和 Chrome 支持替代的 -webkit-animation-fill-mode 屬性。

@keyframes animationName {
    0% {margin-left: 0px;}
    100% {margin-left: 200px;}
}
.green {
    background-color: green;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.brown {background-color: brown;}
div {
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
    -moz-animation: animationName 5s linear 1;
    -o-animation: animationName 5s linear 1;
    animation: animationName 5s linear 1;
}

 

 

參考資料

  1. W3school
  2. CSS3 animation 動畫屬性
  3. 完整解析 CSS 動畫 ( CSS Animation )
  4. CSS 使用动画—— @keyframes 规则和 animation 规则
  5. Flash 的替代技術

#css #css保健室 #animation #@keyframes #animation-name #animation-duration #animation-timing-function #animation-delay #animation-iteration-count #animation-direction #animation-play-state #animation-fill-mode

itiswonderfall
前端工程師
瑪莉．羅賓遜說：「每個人都可以從今天開始，創造一個全新的結局。」




Related Posts

《鳥哥 Linux 私房菜：基礎篇》Chapter 05 - Linux 的檔案權限與目錄配置

《鳥哥 Linux 私房菜：基礎篇》Chapter 05 - Linux 的檔案權限與目錄配置

 Sunny
Leetcode 刷題 pattern - Top K elements

Leetcode 刷題 pattern - Top K elements

 Po-Jen
Explore-Arrays 101

Explore-Arrays 101

 Hans-Tsai

Comments