引自https://blog.csdn.net/u013243347/article/details/79976352
作者：Robbie丨Yang
可以看這個(gè)講的挺好的
Animation
前言
好的前端工程師吓妆，會(huì)更注重用戶的體驗(yàn)和交互捌斧。那么動(dòng)畫就是將我們的靜態(tài)頁面呕童，變成具有靈動(dòng)性缅疟，為我們的界面添加個(gè)性的一種方式。
下面是七喜的官方主頁，它就是很好的富交互樣例。鼠標(biāo)移動(dòng)到導(dǎo)航欄，就會(huì)播放多種動(dòng)效铃绒，給用戶一種酷炫的體驗(yàn)。我覺得用戶體驗(yàn)螺捐，才是前端工程師更加關(guān)注的問題颠悬，而不是一味追求Javascript的編碼技能。
Github 源碼(歡迎Fork~~)
Animation 組成
CSS3 Animation 是由三部分組成定血。
1.關(guān)鍵幀(@keyframes)
- 關(guān)鍵幀(keyframes) - 定義動(dòng)畫在不同階段的狀態(tài)赔癌。
- 動(dòng)畫屬性(properties) - 決定動(dòng)畫的播放時(shí)長，播放次數(shù)澜沟，以及用何種函數(shù)式去播放動(dòng)畫等灾票。（可以類比音視頻播放器）
- css屬性 - 就是css元素不同關(guān)鍵幀下的狀態(tài)。
下面我們來看一個(gè)例子茫虽。
創(chuàng)建了一個(gè)@keyframes命名為dropdown刊苍。
- 關(guān)鍵幀主要分為3個(gè)階段，0%濒析、50%正什、100%。
- 動(dòng)畫播放時(shí)長為6s号杏、循環(huán)播放(infinite)婴氮、以linear方式進(jìn)行播放。
- 修改的元素屬性為margin-top
.list div:first-child {
animation: dropdown 8s linear infinite;
}
@keyframes dropdown {
0% { margin-top: 0px;}
/** 暫停效果 */
10% { margin-top: 0px;}
50% { margin-top: -100px;}
60% { margin-top: -100px;}
90% { margin-top: -200px;}
100% { margin-top: -200px;}
}
需要注意盾致！當(dāng)屬性的個(gè)數(shù)不確定時(shí)：
當(dāng)我們?cè)诙x不同關(guān)鍵幀主经，元素屬性的個(gè)數(shù)是一個(gè)變化的值。
如果一個(gè)關(guān)鍵幀的屬性庭惜，沒有出現(xiàn)在其他關(guān)鍵幀的時(shí)候罩驻，那么這些屬性將會(huì)使用上一幀的默認(rèn)值。
區(qū)別在于蜈块，缺省之后的漸變效果是不會(huì)出現(xiàn)的鉴腻。比如下面兩種寫法迷扇，
@keyframes dropdown {
0% { top: 0; }
30% { top: 300px; }
50% { top: 150px; }
70% { top: 300px; }
80% { top: 0px; left:-200px;}
100% { top: 0px; }
}
@keyframes dropdown {
0% { top: 0; left:0px;}
30% { top: 300px; left:0px;}
50% { top: 150px; left:0px;}
70% { top: 300px; left:0px;}
80% { top: 0px; left:-200px;}
100% { top: 0px; left:0px;}
}
語法
@keyframes keyframes-name {
[ [ from | to | <百分比> ] [, from | to | <百分比> ]* block ]*
}
keyframes-name
幀列表的名稱百揭。 名稱必須符合 CSS 語法中對(duì)標(biāo)識(shí)符的定義爽哎。
from
等效于 0%.
to
等效于 100%.
2.動(dòng)畫屬性
動(dòng)畫屬性可以理解為播放器的相關(guān)功能，一個(gè)最基本的播放器應(yīng)該具有：播放/暫停器一、播放時(shí)長课锌、播放順序(逆序/正序/交替播放)、循環(huán)次數(shù)等祈秕。
主要也分為兩大點(diǎn)：
- 指定播放的元素
-
定義播放信息的配置
這里寫圖片描述
簡寫屬性形式:
animation:
[animation-name] [animation-duration] // 動(dòng)畫的名稱渺贤、持續(xù)時(shí)間
[animation-timing-function][animation-delay] // 關(guān)于時(shí)間的函數(shù)(properties/t)、延遲時(shí)間
[animation-iteration-count] [animation-direction] // 播放次數(shù)请毛、播放順序
[animation-fill-mode] [animation-play-state]; // 播放前或停止后設(shè)置相應(yīng)樣式志鞍、控制動(dòng)畫運(yùn)行或暫停
1.時(shí)間函數(shù)（animation-timing-function）
animation-timing-function屬性定義了動(dòng)畫的播放速度曲線。
可選配置參數(shù)為:
ease方仿、
ease-in固棚、
ease-out、
ease-in-out仙蚜、
linear此洲、
cubic-bezier(number, number, number, number)
動(dòng)畫源碼
默認(rèn)值，如果沒有顯示寫調(diào)用的函數(shù)委粉，則默認(rèn)為ease呜师。
2.動(dòng)畫方向（animation-direction）
animation-direction屬性表示CSS動(dòng)畫是否反向播放。
可選配置參數(shù)為:
single-animation-direction = normal | reverse | alternate | alternate-reverse
- animation-direction: normal 正序播放
- animation-direction: reverse 倒序播放
- animation-direction: alternate 交替播放
- animation-direction: alternate-reverse 反向交替播放
- animation-direction: normal, reverse
- animation-direction: alternate, reverse, normal
3.動(dòng)畫延遲（animation-delay）
animation-delay屬性定義動(dòng)畫是從何時(shí)開始播放贾节，即動(dòng)畫應(yīng)用在元素上的到動(dòng)畫開始的這段時(shí)間的長度汁汗。
默認(rèn)值0s，表示動(dòng)畫在該元素上后立即開始執(zhí)行栗涂。
該值以秒(s)或者毫秒(ms)為單位知牌。
4.動(dòng)畫迭代次數(shù)（animation-iteration-count）
animation-iteration-count該屬性就是定義我們的動(dòng)畫播放的次數(shù)。次數(shù)可以是1次或者無限循環(huán)戴差。
默認(rèn)值只播放一次送爸。
single-animation-iteration-count = infinite | number
5.動(dòng)畫填充模式（animation-fill-mode）
animation-fill-mode是指給定動(dòng)畫播放前后應(yīng)用元素的樣式。
single-animation-fill-mode = **none **| **forwards **| **backwards **| both
- animation-fill-mode: none 動(dòng)畫執(zhí)行前后不改變?nèi)魏螛邮?/li>
- animation-fill-mode: forwards 保持目標(biāo)動(dòng)畫最后一幀的樣式
- animation-fill-mode: backwards 保持目標(biāo)動(dòng)畫第一幀的樣式
- animation-fill-mode: both 動(dòng)畫將會(huì)執(zhí)行 forwards 和 backwards 執(zhí)行的動(dòng)作暖释。
6.動(dòng)畫播放狀態(tài)（animation-timing-function）
animation-play-state: 定義動(dòng)畫是否運(yùn)行或者暫停袭厂。可以確定查詢它來確定動(dòng)畫是否運(yùn)行球匕。
默認(rèn)值為running
single-animation-timing-function = running | paused
- running 動(dòng)畫正常播放
- paused 動(dòng)畫暫停播放
相關(guān)鏈接
SVG動(dòng)畫實(shí)踐
分享一些CSS3動(dòng)效網(wǎng)站:
Animation.css 一個(gè)很全的CSS3的動(dòng)效庫纹磺，可以嘗試看看源碼進(jìn)行學(xué)習(xí)。
CreateJS 里面的特效做得也很不錯(cuò)亮曹，有很多酷炫的樣例橄杨。
國外css3網(wǎng)頁 布局很優(yōu)雅的網(wǎng)站
USAToday 也是一個(gè)很酷炫的國外網(wǎng)站
peekabeat 很清爽的界面
heartbeat 交互很棒的網(wǎng)站
dances 貌似是交響樂的網(wǎng)站主頁
reative 很有時(shí)代感的網(wǎng)站
animation 在線animation編輯器
