引言
日常前端开发中，时不时需要添加过渡动画或者动画特效。但是往往大家很容易混淆过渡与动画，基于此我们来简单汇总下二者的使用方式与区别吧。
过渡
1.介绍
过渡指：用户某种行为作用在元素上，从而产生动画效果。
2.过渡三要素
过渡必须满足三要素：
- 属性 transition-property
- 用户触发行为（hover,actived等行为）
- 动画执行时间 transition-duration
如下是一个简单的过渡动画例子，用户hover在盒子上后，宽度改变，并且动画执行3s。
<div class="box"></div>
.box{
width: 200px;
height: 200px;
background-color: red;
transition-property:width;
transition-duration: 3s;
}
.box:hover{
width: 500px;
}
3.过渡其它常用api
transition-delay: 0s;过渡的延迟执行时间
transition-timing-function:linear ;过渡动画的执行效果
4.多个过渡属性
过渡动画可以同时添加多个属性的改变，只需在指定属性后面添加逗号就可以完成。
如下是同时为width和height添加过渡动画的例子
<div class="box"></div>
.box{
width: 200px;
height: 200px;
background-color: red;
transition-property:width,height;
transition-duration: 3s,3s;
}
.box:hover{
width: 500px;
height:300px;
}
5.过渡的简写
简写顺序 属性 动画时间 动画效果 延迟时间
上述例子width改变的简写改造
<div class="box"></div>
.box{
width: 200px;
height: 200px;
background-color: red;
transition:width 3s;
}
.box:hover{
width: 500px;
}
上述例子width和height同时改变的简写改造
<div class="box"></div>
.box{
width: 200px;
height: 200px;
background-color: red;
transition:width 3s,height 3s;
}
.box:hover{
width: 500px;
height:300px;
}
all的使用
如果想指定元素变化的属性都发生过渡动画，只需要简写成all就可以完成。
<div class="box"></div>
.box{
width: 200px;
height: 200px;
background-color: red;
transition:all 3s;
}
.box:hover{
width: 500px;
height:300px;
}
动画
1.介绍
动画指：自动执行动画的过程，不需要任何介入。（过渡需要用户触发）
2.动画三要素
- 动画名称
- 动画定义
- 动画执行时间
如下是一个动画的执行过程。其宽度和高度同时变大
.box{
width: 100px;
height: 100px;
background: red;
//要素一：动画名称
animation-name: test;
//要素三：动画时间
animation-duration: 3s;
}
//要素二：动画定义
@keyframes test {
from{
width: 100px;
height: 100px;
}to{
width: 300px;
height: 300px;
}
}
3.动画定义方式（两类）
动画的定义方式有两种
- from to
- 百分比
from to
from to定义的动画只能让元素产生一次性的变化。如下盒子宽度和高度发生了一次变化。
@keyframes test {
from{
width: 100px;
height: 100px;
}to{
width: 300px;
height: 300px;
}
}
百分比
百分比解决了动画一次性的变化缺陷，程序员可以任意定义多个阶段的动画改变过程。
@keyframes test {
0%{
width: 100px;
height: 100px;
}
25%{
width: 200px;
height: 200px;
}
50%{
width: 300px;
height: 300px;
}
75%{
width: 400px;
height: 400px;
}
100%{
width: 500px;
height: 500px;
}
}
4.动画其它常用api
1.animation-direction
animation-direction指定了动画是否往返运动，默认动画执行一次后不会执行返回运动
//动画的1次效果是往返都执行
animation-direction：alternate
2.animation-iteration-count
animation-iteration-count指定了动画执行的次数，默认次数是1
//动画的执行3次
animation-iteration-count：3
3.animation-delay
animation-delay指定了动画延迟执行时间
4.animation-timing-function
和过渡一样，指定动画执行的运动速度方式。
//默认执行速度是线性的
animation-timing-function: linear;
5.动画简写
动画简写顺序如下（动画任意属性都可以省略，但是三要素不可以省略，名称，定义，时间）
1.动画名称 2.动画时间 3.动画速度 4.延迟时间 5.执行次数
.box{
width: 100px;
height: 100px;
background: red;
animation:test 3s;
}
//要素二：动画定义
@keyframes test {
from{
width: 100px;
height: 100px;
}to{
width: 300px;
height: 300px;
}
}
