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动画好的想法我会继续分享给你们。

最后，再一次感谢你们的支持！