动画相关属性transform、transition 和 animation及其区别

【引文】

项目经常遇到动画属性，transition过渡，animation动画和transform变换等css3属性经常被用到实际项目当中，想想把它整理出来。如下：

 

【概论】

CSS3的animation类似于transition属性，他们都是随着时间改变元素的属性值

主要区别：

①transition需要触发一 个事件(hover事件或click事件等)才会随时间改变其css属性

②animation在不需要触发任何事件的情况下也可以显式的随着时间变化来 改变元素css的属性值，从而达到一种动画的效果

   这样我们就可以直接在一个元素中调用animation的动画属性,基于这一点，css3的 animation就需要明确的动画属性值，这也就是回到我们上面所说的，我们需要keyframes来定义不同时间的css属性值,达到元素在不同时间 段变化的效果

 

【内容】

（1）先介绍transition过渡属性

在做项目中经常会遇见这样的情景，比如一个按钮，当鼠标移入进去的时候改变按钮背景颜色以及字体颜色，此时我们一般会这么做：

 

.btn{width: 100px;height: 100px;border: 1px solid #333;border-radius: 0px;}
.btn:hover{border-radius: 50%;}

 缺点：边角是瞬间改变的，显得特别生硬

 

 此时transition就登场了，见代码：

 ①加入到触发事件里

.btn{width: 100px;height: 100px;border: 1px solid #333;border-radius: 0px;}
.btn:hover{border-radius: 50%;transition:border-radius 5s;}

 ②加入到触发元素里

.btn{width: 100px;height: 100px;border: 1px solid #333;border-radius: 0px;transition:5s;}
.btn:hover{border-radius: 50%;}

仔细对比下，鼠标滑过时效果一样。但是，当鼠标移出时差异就出来了，如果写到事件里，那么事件执行完毕后，会迅速且生硬地恢复到之前状态。而加到元素里则会过渡性地恢复，所以建议加到元素里。当然，具体应用场景还要看需求

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

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

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

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

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

  为了突破这些限制，animation出来了

 

（2）animation动画

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

.btn{width: 100px;height: 100px;border: 1px solid #333;
     border-radius: 0px;}
.btn:hover{animation: change 5s infinite;}
@-webkit-keyframes change {
            0%{border-radius: 0px;width: 100px;}
            100%{border-radius: 50%;width: 200px}
        }

我们可以这样理解，此时，你需要做一个animation动画只需要3点

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

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

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

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

百分比：

关于百分比你只要理解它是这个这个动画在多少时间内完成的一系列样式改变的进度。这个进度你可以描绘这个元素你想改变的的样式属性（可以定义多种），当然也可以这样写：

@keyframes change {
            from {border-radius: 0px;width: 100px;}
            50% {border-radius: 25%;width: 150px;}
            to {border-radius: 50%;width: 200px;}
}

 animation浏览器一加载便可以自动触发

 

（3）transform变换

transform变换（包含旋转，缩放，倾斜，移动和矩阵变换）

从字面来看transform 的释义为改变，使...改变，转换，这里我们可以理解为变形，那都能怎么变呢，

①node 表示不进行变化

②rotate     旋转   transform:rotate(20deg) 旋转角度可以为负数。需要先有 transform-origin 定义旋转的基点可为 left top center right bottom或者坐标值（50px 70px） 

③skew      扭曲      transform:skew(30deg,30deg) skew(相对X轴倾斜，相对Y轴倾斜)

④scale      缩放            transform:scale(2,3) 横向放大2倍，纵向放大3倍 【等多放大写一个参数即可】

⑤translate 移动            transform:translate(50px,50px) 位移【类似position 的left 以及 top】

⑥matrix      矩阵变形    transform:matrix(a,b,c,d,tx,ty) ;其中a,b,c,d 是一个二维矩阵

 

 

.