前言

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,將其與動畫目標元素關聯起來,而 fromto 各自為動畫的起始與終止狀態,分別可用 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 屬性定義動畫完成一個週期所需要的時間,以 sms 計。

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 屬性定義動畫會延遲幾秒後才進行,值以 sms 計。

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







Related Posts

Test

Test

使用 iSH 讓 Obsidian 在 iOS 設備上同步

使用 iSH 讓 Obsidian 在 iOS 設備上同步

文字方向 - 垂直/水平 文字書寫

文字方向 - 垂直/水平 文字書寫


Comments