CSS3 Transition 與 Animation

CSS3 Transition

在給定的持續時間內平滑地更改屬性值(從一個值到另一個值),也就是只需指定開始與結束的參數,參數改變時就觸發動畫。

CSS3 transitions可以改變css屬性的值,在某個期間內做出變化,類似jQuery.animate()

語法結構如下:

.example {
transition-property: background-color;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 1s; }

transition-property: 指定你要變化的CSS屬性

transition-duration: 指定transition從開始到結束的變化時間,在數字後面加上s就是以秒計算,用ms就是微秒

transition-timing-function: 根據時間的進行去改變屬性值的變化速率

transition-delay: 可以指定秒或微秒來延遲transition觸發的時間

簡潔的寫法:

.example { transition: background-color 2s ease-in 1s; }

如果想在同個元素上定義複數個transitions,可以用下面寫法:

.example {
transition: background-color 2s ease-in 1s, width 2s ease-in-out, height 3s ease-out; }

範例:

.example {
background-color: green; transition: background-color 2s ease-in 1s; width:100px; height:100px; }

.example:hover { background-color: blue }

CSS Animation

可以自行撰寫動畫 開始、進行間、結束時各階段的變化,適合用來做較細微的動畫表現。需要明確的指定關鍵影格(@keyframes)的參數。

@keyframes test {
0% {
...
}
100% {
...
}
}

animation-name 名稱

animation-name: test;

animation-duration 時間

animation-duration: 2s;

animation-timing-function

  • inear: 平均速度
  • ease: 快入緩出 (預設)
  • ease-in: 緩入
  • ease-out: 緩出
  • ease-in-out: 緩入緩出
  • cubic-bezier: 自定義速度模式

animation-delay 延遲

animation-iteration-count

0:代表該動畫並不會播放。
數整:表示該動畫的播放次數,例:2 即會播放兩次。
infinite:表示該動畫會播放無限多次。

CSS3 Transition 與 Animation

animation-direction

  • normal(正常播放)
  • reverse (反向播放)
  • alternate (正向撥放,再反向播放)
  • alternate-reverse (反向撥放,再正向播放)

animation-fill-mode 

  • none (回到最初未撥放狀態)
  • forwards (停在最後一個狀態)
  • backwards (停在第一個狀態)
  • both (停留在 animation-direction 最後一個狀態)

animation-play-state 播放狀態

  • running (預設播放)
  • paused (暫停播放)

 

See the Pen
qBNaMbv
by dorigo (@dorigowu)
on CodePen.

關於作者 多力哥
CSS3 Transition 與 Animation
影像創作攝影師/網頁動畫設計師/系統網路工程師/水草研究生
大學畢業後為網站動畫設計師,並副修MIS管理公司伺服器,2004年開始接觸單眼相機,2008年正式成為婚禮攝影師,目前主力為Canon5D4。2016年愛上美麗的水草缸,每天在電腦前修圖之餘還能看看綠油油的水草享受放鬆一下^^
連絡信箱:[email protected]
DORIGO IMAGE 攝影工作室:http://www.dorigo-image.com
若您喜歡這篇文章,歡迎按讚分享喔!
0 回復

發表評論

想要留言嗎?
歡迎歡迎!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *