2018年1月17日总结 css3里transition 和animation 区别

transition 和animation两个CSS3属性经常被用到实际项目中，想把它整理出来。

1.先介绍transition

>>>>>  a. 在做项目中经常会遇见这样的情景，比如一个按钮，当鼠标移入进去的时候改版按钮背景颜色以及字体颜色。此时外面一般会这样做：

.btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;}
.btn:hover{background:green;color:white;}

>>>>>  b. 我们会发现背景以及字体颜色是瞬间改版的，是不是显得特别生硬

此时transition 就登场了

.btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;}

.btn:hover{background:green;color:white;transition：0.4s;}

>>>>>  c. 加入transition 后我们会发现按钮背景颜色以及字体颜色具备一个世界渐进的过程，直至结束。

这个渐进是怎么来的呢，没错就是0.4s，

谈及0.4s，就要扯到transition 的各项属性了

1). 上述的.4s 是transition 其中一个属性的简写：transition-duration

transition-duration 顾名思义，表示动画持续的时间，也就是市面上的0.4s。在0.4秒的时间中完成背景颜色以及字体颜色的动态

2). 设计到0.4秒中持续的动画，我们就要谈及物体运动的快慢了，我们知道一个事物所具备的运动具有这几种：

a) linear : 匀速

b) ease-in : 加速

c) ease-out : 减速

d) cubic-bezier 函数：自定义速度模式

上面代码中就简简单单的只写了 transition:0.4s 为什么具备有一个运动呢？

3). 是这样子的，transition 有一个属性叫做transition-timing-function ,默认是ease，它运动的形式是逐渐放慢的

不简写就是 transition:0.4s ease

>>>>>  d.我们看到，按钮hove 之后，hover 样式里所有css描述的变化都具备有transition所描述的动画。

1）. 若是只想让背景颜色具备一个时间段的变化，我们该怎么做呢？

transition: 0.4s background ease-in

　　2） 我们在上面diam中看到了background,是的没错，就是因为它指定了动画中只背景颜色具有动画。

它是transition 其中一个属性的简写。叫做：transition-property,顾名思义，指定属性。

e. 我们在实际项目中会发现，有时候我们需要一个动画具备一个延迟的展现，不希望他立即就产生动画，此时transition 的又一个属性就出来了，transition-delay

transition:0.4s 1s

我们会发现，此时这个按钮的背景字体动画是在1秒钟之后才开始的。

transition虽然简单好用，但是我们会发现它受到各种限制

1。transition需要一个时间来触发，比如hover，所以没发在网页加载时自动发生。

2。transition是一次性的，不能重复发生，除非一再触发。

3。transition只能定义开始状态和结束状态，不能定义中间状态，也就是只有两个状态

4。一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

2.animation

a) 先不详细解释 animation的各项属性了，我们直接来showing代码

.c{width: 100px;height: 100px;margin: 200px 0 300px 300px;background: orange; }
        .c:hover{animation: 2s change infinite;}

        @keyframes change {
            0% { background: orange; }
            50% { background: pink;width: 200px; }
            100% { background: red;height: 300px; }
        }

上面的代码会产生这样的效果，见截图：

b).当鼠标移入P的时候，P会发生一系列的样式改变（截图无法表现过程）在2秒的世界内完成背景颜色以及宽高的变化，并无限制重复这个两秒的动画，我因为什么呢？

c),我准备做这个解释，此时你需要做一个animation动画只需要3点

1.需要一个承载动画的元素，如P

2.当前的元素写一个animation的css，其中定义你所需要这个动画产生的效果（你暂时不需要知道如何编写这个动画内部的css）

3.编写一个动画进程，以@keyframes 关键字来定义，而这个动画的进程有一个名字，如change

A. 你可以把这个进程理解成一个函数，@keyframes 对应的就是function ，而change 对应的就是函数名字 ，最终等待被调用。

好了，明白了以上三点，我们就可以来剖析animation 的庐山真面目了。

a) 我们接着再来看这段代码

animation: 2s change infinite;
　　　　

@keyframes change {
       0% { background: orange; }
       50% { background: pink;width: 200px; }
       100% { background: red;height: 300px; }
}

1. 我们先来看这个“所谓的函数change”

(1) 这个change 是animation 其中的一个属性，叫做动画名字， animation-name:change

2.我们再来看这个“百分比”

(1),这个百分比你只要理解它是这个动画在多数时间内完成的一系列样式改变的进度。这个进度你可以描绘这个元素你想改版的样式属性

(2) 当然也可以这样写：

@keyframes change {
            from { background: orange; }
            50% { background: pink;width: 200px; }
            to { background: red;height: 300px; }
}

3. 看完了动画制作的过程，现在我们来看如果调用这个动画：

.c:hover{animation: 2s change infinite;}

（1），机智的你肯定看到了2s， 是的没错，就是它让动画2秒完成。和transition一样，它是一个animation 的一个属性， 叫做animation-duration:2s

（2）,机智的你肯定看到了change是的没错，就是如此调用这个“动画函数”的，只需要在当前元素animation的css 样式里写入就可以了

（3）刚刚前面我们说了，这段代码会在鼠标移动P元素后2秒的时间完成背景颜色以及宽度的变化，并无限制重复这两秒的动画

*

未完待续  ---

http://www.php.cn/css-tutorial-356867.html