【CSS3】CSS3動畫——我離前端的炫酷又近了一步
博客說明
文章所涉及的部分資料來自互聯(lián)網(wǎng)整理植康，當(dāng)然還有自己個人的總結(jié)和看法旷太，分享的目的在于共建社區(qū)和鞏固自己。引用的資料如有侵權(quán)销睁，請聯(lián)系本人刪除供璧！幸好我在，感謝你來冻记！
說明
CSS3 可實(shí)現(xiàn) HTML 元素的動畫效果睡毒，而不使用 JavaScript 或 Flash。
為了學(xué)習(xí)前端的動效冗栗，我簡直是不折手段演顾。目前就抓著CSS的動畫來搞一波。
什么是動畫
?老規(guī)矩隅居，問句開頭钠至。
在需要變化的時間節(jié)點(diǎn)上指定一些關(guān)鍵幀，關(guān)鍵幀就是此刻所定義的樣式胎源。例如我在1s左移5m棉钧，3s左一15m，這時就有兩個關(guān)鍵幀涕蚤，因?yàn)檫@兩個關(guān)鍵幀宪卿，畫面就發(fā)生了位移，那么動畫也就產(chǎn)生了赞季。
下面這句話總結(jié)到位：動畫使元素逐漸從一種樣式變?yōu)榱硪环N樣式愧捕。
CSS3的動畫主要依賴@keyframes和animation來實(shí)現(xiàn)。
@keyframes和animation的瀏覽器支持
@keyframes 規(guī)則
@keyframes 規(guī)則是創(chuàng)建動畫申钩。
@keyframes 規(guī)則內(nèi)指定一個 CSS 樣式和動畫將逐步從目前的樣式更改為新的樣式次绘。
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
以上的就是一個簡單的動畫，關(guān)鍵詞 "from" 和 "to"撒遣，等同于 0% 和 100%邮偎。0% 是動畫的開始，100% 是動畫的完成义黎。也就是從紅色變成黃色禾进。
為了得到最佳的瀏覽器支持，使用 0% 和 100% 選擇器是最好的選擇廉涕。
animation
animation既然動畫的關(guān)鍵幀都有了泻云，那么就需要把這個關(guān)鍵幀落實(shí)并綁定到某個DOM上艇拍。
語法
可以一起寫，也可以分開寫屬性宠纯。
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation-name
指定要綁定到選擇器的關(guān)鍵幀的名稱
語法
animation-name: keyframename|none;
// keyframename 指定要綁定到選擇器的關(guān)鍵幀的名稱
animation-duration
動畫指定需要多少秒或毫秒完成
語法
animation-duration: time;
// time 指定動畫播放完成花費(fèi)的時間卸夕。
animation-timing-function
指定動畫將如何完成一個周期
語法
animation-timing-function: value;
動畫函數(shù)
linear 動畫從頭到尾的速度是相同的。
ease 默認(rèn)婆瓜。動畫以低速開始快集，然后加快，在結(jié)束前變慢廉白。
ease-in 動畫以低速開始
ease-out 動畫以低速結(jié)束个初。
ease-in-out 動畫以低速開始和結(jié)束。
-
steps(int,start|end）指定了時間函數(shù)中的間隔數(shù)量（步長）猴蹂。
有兩個參數(shù)院溺，第一個參數(shù)指定函數(shù)的間隔數(shù)，該參數(shù)是一個正整數(shù)（大于 0）晕讲。
第二個參數(shù)是可選的覆获，表示動畫是從時間段的開頭連續(xù)還是末尾連續(xù)。
-
cubic-bezier(n,n,n,n) 貝塞爾曲線
給一個貝塞爾曲線的的一個網(wǎng)站瓢省，你會感謝??我的哈弄息！地址
animation-delay
定義動畫什么時候開始，單位可以是秒（s）或毫秒（ms）
語法
animation-delay: time;
// time 定義動畫開始前等待的時間勤婚，以秒或毫秒計
animation-iteration-count
定義動畫應(yīng)該播放多少次摹量。
語法
animation-iteration-count: value;
// n 定義應(yīng)該播放多少次動畫
// infinite 指定動畫應(yīng)該播放無限次（永遠(yuǎn)）
animation-direction
是否循環(huán)交替反向播放動畫。
這個是一個可玩性很高的一個屬性馒胆。
語法
animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
參數(shù)解析
- normal 默認(rèn)值缨称。動畫按正常播放。
- reverse 動畫反向播放祝迂。
- alternate 動畫在奇數(shù)次（1睦尽、3、5...）正向播放型雳，在偶數(shù)次（2当凡、4、6...）反向播放纠俭。
- alternate-reverse 動畫在奇數(shù)次（1沿量、3、5...）反向播放冤荆，在偶數(shù)次（2朴则、4、6...）正向播放钓简。
- initial 繼承的屬性
- inherit 繼承的屬性
animation-fill-mode
屬性規(guī)定當(dāng)動畫不播放時（當(dāng)動畫完成時乌妒，或當(dāng)動畫有一個延遲未開始播放時）汹想，要應(yīng)用到元素的樣式。
如果你需要考慮到動畫的狀態(tài)芥被，可以使用這個屬性欧宜，比如保留動畫改變后的效果坐榆。
語法
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
參數(shù)解析
- none 默認(rèn)值拴魄。動畫在動畫執(zhí)行之前和之后不會應(yīng)用任何樣式到目標(biāo)元素。
- forwards 在動畫結(jié)束后（由 animation-iteration-count 決定）席镀，動畫將應(yīng)用該屬性值匹中。
- backwards 動畫將應(yīng)用在 animation-delay 定義期間啟動動畫的第一次迭代的關(guān)鍵幀中定義的屬性值。
- both 動畫遵循 forwards 和 backwards 的規(guī)則豪诲。
- initial 繼承的屬性
- inherit 繼承的屬性
animation--play-state
指定動畫是否正在運(yùn)行或已暫停顶捷。
語法
animation-play-state: paused|running;
// paused 指定暫停動畫
// running 指定正在運(yùn)行的動畫
案例
顏色變換
div的顏色由紅色變?yōu)辄S色
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動畫測試</title>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 6s;
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果
順時鐘移動
將div順時針移動
代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動畫測試</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果
總結(jié)
其實(shí)也看到這些基礎(chǔ)的動畫，其實(shí)實(shí)現(xiàn)起來并不復(fù)雜屎篱，那些復(fù)雜的動畫也都是通過這樣基礎(chǔ)的動畫構(gòu)建的服赎。但是是不是會有一個疑問，怎么記得住這樣的屬性的使用呢交播？
這個問題和問PS的快捷鍵怎么也記不住是一樣的重虑，因?yàn)槎紱]有經(jīng)常使用，怎么記得住秦士。等畫了上百個復(fù)雜動畫之后缺厉，相信就會對這個動畫有比較好的了解啦！
期待后續(xù)花樣的動畫案例吧隧土！一切才剛剛開始提针！
感謝
萬能的網(wǎng)絡(luò)
以及勤勞的自己，個人博客曹傀，GitHub測試辐脖，GitHub
公眾號-歸子莫，小程序-小歸博客
如果你感覺對你有幫助的話皆愉，不妨給我點(diǎn)贊??吧票堵，持續(xù)關(guān)注也行哈赡盘！
