打造網頁互動效果的動畫教學

基礎CSS動畫新手教學

CSS製作動畫

此篇是關於CSS基本動畫的教學

通常寫animation的CSS標籤

animation: name 3s ease 0s 2 alternate both
animation: 動畫名稱 執行秒數 速度函數 延遲 次數 動畫方向 撥放前後
同一層的animation只會有一個有效果
動畫名稱、執行秒數、速度函數、延遲、次數
這5個是完成一個animation必要的元素
如果要讓動畫更豐富,可以在下一層加上新的animation
下面將會介紹animation的基本標籤

animation的基本標籤

animation-name:

動畫名稱

animation-duration:

動畫跑的時間

通常設定都是用s(秒數)也可以用ms(毫秒)

animation-timing-function:

補間動畫運用的計算公式

常用的有
linear(平均速度)
ease(一開始急速,後緩慢)
ease-in(急速加速)
ease-out(急速減速)
ease-in-out(比較平緩的ease)
cubic-bezier(自訂加速)

animation-delay:

動畫延遲多久後才開始

通常設定都是用s(秒數)也可以用ms(毫秒)

animation-iteration-count:

動畫跑的次數

infinite(無限)

animation-direction:

動畫開始的方向

常用的有
normal(預設值,正常撥放)
reverse(反向撥放)
alternate(動畫在奇數次(1,3,5)正向撥放,偶數次(2,4,6)反向撥放)
alternate-reverse(動畫在奇數次(1,3,5)反向撥放,偶數次(2,4,6)正向撥放)

animation-fill-mode:

動畫撥放前和撥放後

常用的有
forwards(當動畫完成後,停留在最後動畫設定的屬性值)
backwards(在animation-delay的延遲時間內,使用動畫一開始設定的屬性值)
both(撥放前和撥放完都使用動畫設定一開始和最後的屬性值)
none(動畫完成後恢復原本的CSS)

@keyframes 開始建立動畫

再來是如何寫自己的動畫
會用的關鍵影格
分別為from、to
和0~100%
@keyframes 動畫名稱 { 0%{CSS樣式} 100%{CSS樣式} }
或是
@keyframes 動畫名稱 { from{CSS樣式} to{CSS樣式} }

綜合以上所教的,正式寫一個動畫

做一個從右邊,淡入進來的動畫
跑完一次2秒
動畫速度平均
無延遲時間
無限次數跑
animation: test 2s linear 0s infinite;

@keyframes test { 0%{opacity: 0;transform: translateX(30px);} 100%{opacity: 1;transform: translateX(0px);} }