css動(dòng)畫的動(dòng)畫制作沒(méi)有什么特別高深的地方涉波，引入少量的css代碼就能實(shí)現(xiàn)豐富多彩的頁(yè)面效果是作為一個(gè)web前端開(kāi)發(fā)者所推崇的英上，但我想要強(qiáng)調(diào)的是掌握并深入的理解css的基礎(chǔ)，以及靈活的運(yùn)用是做出一個(gè)畫面美觀啤覆、代碼簡(jiǎn)潔苍日、性能高效的css動(dòng)畫的必備技能。今天窗声，我也就不再多做贅述相恃，我就來(lái)說(shuō)一說(shuō)我在做css動(dòng)畫的心得體會(huì)。
我把css動(dòng)畫的制作分為3個(gè)階段：學(xué)習(xí)（初步）階段笨觅、模仿階段拦耐、自我開(kāi)發(fā)階段。
學(xué)習(xí)（初步）階段
首先见剩，現(xiàn)在web前端框架杀糯，理念不斷地推陳出新的今天，作為一個(gè)前端開(kāi)發(fā)人員學(xué)習(xí)應(yīng)該成為我們的常態(tài)苍苞，它是我們拿取高薪的基礎(chǔ)固翰，同時(shí)也是我們不被淘汰的基石之一；
其次羹呵，就是要加深理解骂际、加強(qiáng)練習(xí)。二者互為依托冈欢，理解需要通過(guò)練習(xí)來(lái)驗(yàn)證歉铝，理解使練習(xí)變得簡(jiǎn)單；
最后凑耻，就是把學(xué)習(xí)太示、理解和練習(xí)的成果展現(xiàn)出來(lái)柠贤。例如，在我們所做的項(xiàng)目中來(lái)展現(xiàn)自己的成果先匪，這樣可以轉(zhuǎn)變?yōu)楦鼮橹庇^的東西种吸，與此同時(shí)也能提高自己的關(guān)注度（這不多說(shuō)，你也知道）呀非。
模仿階段
作為一個(gè)程序員坚俗，特別是一個(gè)前端的程序員，你會(huì)像spider一樣不停的在網(wǎng)頁(yè)之間進(jìn)行跳轉(zhuǎn)岸裙，找到自己喜歡的頁(yè)面猖败，獲取自己需要的代碼和其他資源。當(dāng)我們找到我們所要的資源后就是使用降允。
每當(dāng)我們?cè)诰W(wǎng)頁(yè)中發(fā)現(xiàn)一些漂亮的動(dòng)畫恩闻，我們將想著這個(gè)動(dòng)畫效果我們來(lái)現(xiàn)的話，我們會(huì)怎么做剧董？我們首先會(huì)查看原網(wǎng)頁(yè)中的html結(jié)構(gòu)幢尚，并嘗試著把它寫出來(lái)，然后根據(jù)自己的理解寫出來(lái)css代碼翅楼，寫完后我們會(huì)查看效果尉剩，如果實(shí)現(xiàn)了元網(wǎng)頁(yè)中的效果，我們也會(huì)嘗試著優(yōu)化代碼毅臊，看一看能不能簡(jiǎn)寫代碼理茎；也會(huì)嘗試看看能不能添加一些東西是動(dòng)畫更酷；同時(shí)也會(huì)嘗試一下能不能在此動(dòng)畫效果的基礎(chǔ)上創(chuàng)作出更好看的動(dòng)畫效果管嬉。
只是進(jìn)行文字的描述感覺(jué)有些空洞皂林，那就舉一系列與border有關(guān)的css動(dòng)畫來(lái)說(shuō)明一下。
這是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)border的動(dòng)畫蚯撩，但這個(gè)動(dòng)畫并不是真正的實(shí)現(xiàn)元素的border的動(dòng)畫础倍，它是通過(guò)偽元素::after, ::before中的一個(gè)或兩個(gè)的運(yùn)動(dòng)來(lái)實(shí)現(xiàn)的。
css代碼如下：
.l-border-line::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #ff0000;
content: '';
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: ease-in-out 0.2s;
transition: ease-in-out 0.2s;
}
.l-border .l-border-line::after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
這個(gè)動(dòng)畫效果有兩個(gè)動(dòng)畫疊加組成求厕，其中一個(gè)是當(dāng)鼠標(biāo)移入border的顏色的變化著隆，這里是一個(gè)transition過(guò)渡動(dòng)畫；另一個(gè)是當(dāng)鼠標(biāo)移入動(dòng)畫沿著border的環(huán)繞顏色變化呀癣，要實(shí)現(xiàn)它需要給動(dòng)畫一個(gè)延時(shí)讓動(dòng)畫沿著寬高來(lái)變化，但是一個(gè)長(zhǎng)方形有兩個(gè)寬高弦赖，所以项栏，偽元素::after, ::before兩個(gè)都需用上,
鼠標(biāo)移入前：
偽元素::before transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in,
偽元素::after transition::border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s。
鼠標(biāo)移入時(shí)：
偽元素::before transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
偽元素::after transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
css代碼如下：
.l-border{
display: inline-block;
padding: 16px 32px;
border: 1px solid #ebebeb;
-webkit-transition: all 0.6s ease-in;
transition: all 0.6s ease-in;
}
.l-border:hover{
border: 1px solid #367dff;
}
.border-line {
position: relative;
display: inline-block;
height: 100%;
background: none;
box-sizing: border-box;
box-shadow: inset 0 0 0 0px transparent;
}
.border-line::after,
.border-line::before {
position: absolute;
content: '';
display: block;
width: 0;
height: 0;
box-sizing: border-box;
border: 1px solid transparent;
}
.border-line::after {
top: 0;
left: 0;
-webkit-transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
}
.border-line::before {
bottom: 0;
right: 0;
-webkit-transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;
transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;
}
.border-line:hover::after,
.border-line:hover::before {
width: 100%;
height: 100%;
}
.border-line:hover::after {
border-top-color: #367dff;
border-right-color: #367dff;
-webkit-transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
}
.border-line:hover::before {
border-bottom-color: #367dff;
border-left-color: #367dff;
-webkit-transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
}
這個(gè)動(dòng)畫有兩部分組分成：一是中間文字內(nèi)容的變形translate,然后加上一個(gè)transition過(guò)渡來(lái)組成蹬竖；二是邊框的動(dòng)畫沼沈，它是第一個(gè)示例動(dòng)畫的組合流酬。
偽元素::after控制border-left,border-right的動(dòng)畫，偽元素::before控制border-top,border-bottom的動(dòng)畫列另。
html代碼：
<div class="effect-box">
<div class="border-line2">
<p> 319 </p>
<p> 布局和界面</p>
<p>Read More</p>
</div>
</div>
css代碼如下：
.effect-box {
position: relative;
display: inline-block;
overflow: hidden;
width: 250px;
height: 158px;
background: rgba(53, 172, 197, 1);
cursor: pointer
}
.effect-box img {
display: block;
width: 100%;
height: 100%;
opacity: .7;
-webkit-transition: opacity .35s;
transition: opacity .35s
}
.effect-box:hover img {
opacity: .4
}
.effect-box .border-line2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 2em;
font-size: 1.25em;
color: #fff;
text-transform: uppercase;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.effect-box .border-line2::after,
.effect-box .border-line2::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
content: '';
opacity: 0;
pointer-events: none;
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s
}
.effect-box .border-line2::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0, 1);
transform: scale(0, 1)
}
.effect-box .border-line2::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1, 0);
transform: scale(1, 0)
}
.effect-box:hover .border-line2::after,
.effect-box:hover .border-line2::before {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
.effect-box .border-line2 p {
padding: 4px 10px;
margin: 0;
font-size: 16px;
line-height: 1.0;
text-align: center;
color: #fff;
letter-spacing: 1px;
opacity: 0;
-webkit-transition: opacity .35s, -webkit-transform .35s;
transition: opacity .35s, transform .35s;
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0)
}
.effect-box:hover .border-line2 p {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
自我開(kāi)發(fā)階段
一個(gè)好的web前端工程師芽腾，不會(huì)僅僅停留在學(xué)習(xí)和模仿的階段，同時(shí)作為一個(gè)好的程序員或有志于成為一個(gè)web前端大神的同學(xué)來(lái)說(shuō)页衙，寫出有自己風(fēng)格和和特性的css動(dòng)畫是必不可少摊滔。那么接下來(lái)我就談一談我在開(kāi)發(fā)的過(guò)程中總結(jié)的一點(diǎn)東西。
1.區(qū)別css動(dòng)畫的使用場(chǎng)合店乐，pc端或者移動(dòng)端艰躺。pc端，transition眨八，animation,transform之間的組合可以任意使用腺兴；移動(dòng)端按照animation，transform廉侧，transition的順序來(lái)使用來(lái)制作動(dòng)畫页响。
2.根據(jù)做wap或者pc的項(xiàng)目不同，wap端我強(qiáng)烈的推薦使用3d動(dòng)畫段誊，一是移動(dòng)端的支持度高闰蚕，二是使用3d可以進(jìn)行硬件加速動(dòng)畫。
3.如果要做的動(dòng)畫要要控制狀態(tài)枕扫，設(shè)置動(dòng)畫的模式陪腌，transition和transform可以不考慮，而直接使用animation來(lái)實(shí)現(xiàn)animation-play-state控制狀態(tài)烟瞧，animation-fill-mode設(shè)置模式诗鸭。
4.做3d動(dòng)畫，就要用到視點(diǎn)参滴，以及要理解在3維空間中改變某一維度值動(dòng)畫如何運(yùn)動(dòng)强岸。
5.css動(dòng)畫的局限性也是必須要了解的，例如曲線動(dòng)畫的實(shí)現(xiàn)砾赔，基于物理的動(dòng)畫實(shí)現(xiàn)蝌箍。而解決曲線動(dòng)畫的實(shí)現(xiàn)的替代方案就是結(jié)合svg來(lái)實(shí)現(xiàn)路徑動(dòng)畫；而對(duì)于后一種物理動(dòng)畫實(shí)現(xiàn)的替代方案暫無(wú)（正在查找與思考中）暴心。
css動(dòng)畫的制作就分享到這里了妓盲，有興趣的同學(xué)可以私聊我，我們來(lái)一起討論专普，后期若有做css動(dòng)畫好的想法我會(huì)繼續(xù)分享給大家悯衬。
最后，再一次感謝大家的支持檀夹！
