css動畫的動畫製作沒有什麼特別高深的地方，引入少量的css程式碼就能實現豐富多彩的頁面效果是作為一個web前端開發者所推崇的，但我想要強調的是掌握並深入的理解css的基礎，以及靈活的運用是做出一個畫面美觀、程式碼簡潔、效能高效的css動畫的必備技能。今天，我也就不再多做贅述，我就來說一說我在做css動畫的心得體會。
我把css動畫的製作分為3個階段：學習（初步）階段、模仿階段、自我開發階段。
學習（初步）階段
首先，現在web前端框架，理念不斷地推陳出新的今天，作為一個前端開發人員學習應該成為我們的常態，它是我們拿取高薪的基礎，同時也是我們不被淘汰的基石之一；
其次，就是要加深理解、加強練習。二者互為依託，理解需要通過練習來驗證，理解使練習變得簡單；
最後，就是把學習、理解和練習的成果展現出來。例如，在我們所做的專案中來展現自己的成果，這樣可以轉變為更為直觀的東西，與此同時也能提高自己的關注度（這不多說，你也知道）。
模仿階段
作為一個程式設計師，特別是一個前端的程式設計師，你會像spider一樣不停的在網頁之間進行跳轉，找到自己喜歡的頁面，獲取自己需要的程式碼和其他資源。當我們找到我們所要的資源後就是使用。
每當我們在網頁中發現一些漂亮的動畫，我們將想著這個動畫效果我們來現的話，我們會怎麼做？我們首先會檢視原網頁中的html結構，並嘗試著把它寫出來，然後根據自己的理解寫出來css程式碼，寫完後我們會檢視效果，如果實現了元網頁中的效果，我們也會嘗試著優化程式碼，看一看能不能簡寫程式碼；也會嘗試看看能不能新增一些東西是動畫更酷；同時也會嘗試一下能不能在此動畫效果的基礎上創作出更好看的動畫效果。
只是進行文字的描述感覺有些空洞，那就舉一系列與border有關的css動畫來說明一下。
這是一個簡單的實現border的動畫，但這個動畫並不是真正的實現元素的border的動畫，它是通過偽元素::after, ::before中的一個或兩個的運動來實現的。
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);
}
這個動畫效果有兩個動畫疊加組成，其中一個是當滑鼠移入border的顏色的變化，這裡是一個transition過渡動畫；另一個是當滑鼠移入動畫沿著border的環繞顏色變化，要實現它需要給動畫一個延時讓動畫沿著寬高來變化，但是一個長方形有兩個寬高，所以，偽元素::after, ::before兩個都需用上,
滑鼠移入前：
偽元素::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。
滑鼠移入時：
偽元素::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;
}複製程式碼這個動畫有兩部分組分成：一是中間文字內容的變形translate,然後加上一個transition過渡來組成；二是邊框的動畫，它是第一個示例動畫的組合。
偽元素::after控制border-left,border-right的動畫，偽元素::before控制border-top,border-bottom的動畫。
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)
}複製程式碼自我開發階段
一個好的web前端工程師，不會僅僅停留在學習和模仿的階段，同時作為一個好的程式設計師或有志於成為一個web前端大神的同學來說，寫出有自己風格和和特性的css動畫是必不可少。那麼接下來我就談一談我在開發的過程中總結的一點東西。
1.區別css動畫的使用場合，pc端或者移動端。pc端，transition，animation,transform之間的組合可以任意使用；移動端按照animation，transform，transition的順序來使用來製作動畫。
2.根據做wap或者pc的專案不同，wap端我強烈的推薦使用3d動畫，一是移動端的支援度高，二是使用3d可以進行硬體加速動畫。
3.如果要做的動畫要要控制狀態，設定動畫的模式，transition和transform可以不考慮，而直接使用animation來實現animation-play-state控制狀態，animation-fill-mode設定模式。
4.做3d動畫，就要用到視點，以及要理解在3維空間中改變某一維度值動畫如何運動。
5.css動畫的侷限性也是必須要了解的，例如曲線動畫的實現，基於物理的動畫實現。而解決曲線動畫的實現的替代方案就是結合svg來實現路徑動畫；而對於後一種物理動畫實現的替代方案暫無（正在查詢與思考中）。
css動畫的製作就分享到這裡了，有興趣的同學可以私聊我，我們來一起討論，後期若有做css動畫好的想法我會繼續分享給大家。
最後，再一次感謝大家的支援！