transform，transition，animation 的混合使用——結業篇

css動畫的動畫製做沒有什麼特別高深的地方，引入少許的css代碼就能實現豐富多彩的頁面效果是做爲一個web前端開發者所推崇的，但我想要強調的是掌握並深刻的理解css的基礎，以及靈活的運用是作出一個畫面美觀、代碼簡潔、性能高效的css動畫的必備技能。今天，我也就再也不多作贅述，我就來講一說我在作css動畫的心得體會。

我把css動畫的製做分爲3個階段：學習（初步）階段、模仿階段、自我開發階段。

學習（初步）階段

首先，如今web前端框架，理念不斷地推陳出新的今天，做爲一個前端開發人員學習應該成爲咱們的常態，它是咱們拿取高薪的基礎，同時也是咱們不被淘汰的基石之一；
其次，就是要加深理解、增強練習。兩者互爲依託，理解須要經過練習來驗證，理解使練習變得簡單；
最後，就是把學習、理解和練習的成果展示出來。例如，在咱們所作的項目中來展示本身的成果，這樣能夠轉變爲更爲直觀的東西，與此同時也能提升本身的關注度（這很少說，你也知道）。

模仿階段

做爲一個程序員，特別是一個前端的程序員，你會像spider同樣不停的在網頁之間進行跳轉，找到本身喜歡的頁面，獲取本身須要的代碼和其餘資源。當咱們找到咱們所要的資源後就是使用。
每當咱們在網頁中發現一些漂亮的動畫，咱們將想着這個動畫效果咱們來現的話，咱們會怎麼作？咱們首先會查看原網頁中的html結構，並嘗試着把它寫出來，而後根據本身的理解寫出來css代碼，寫完後咱們會查看效果，若是實現了元網頁中的效果，咱們也會嘗試着優化代碼，看一看能不能簡寫代碼；也會嘗試看看能不能添加一些東西是動畫更酷；同時也會嘗試一下能不能在此動畫效果的基礎上創做出更好看的動畫效果。

只是進行文字的描述感受有些空洞，那就舉一系列與border有關的css動畫來講明一下。

border-anim-1

這是一個簡單的實現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-anim-2

這個動畫效果有兩個動畫疊加組成，其中一個是當鼠標移入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;
}複製代碼

border-anim3.gif

這個動畫有兩部分組分紅：一是中間文字內容的變形translate,而後加上一個transition過渡來組成；二是邊框的動畫，它是第一個示例動畫的組合。
僞元素::after控制border-left,border-right的動畫，僞元素::before控制border-top,border-bottom的動畫。

html代碼：

<div class="effect-box">
        ![](./img/bg.jpg)
        <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動畫好的想法我會繼續分享給你們。

最後，再一次感謝你們的支持！