在CSS3之前，动画主要都是以JavaScript或者Gif图片来实现，但是实现效果并不是很理想或者制作起来很麻烦，自有了CSS3之后很多动画几句代码即可实现，方便，快速，性能更好。
目录
- animation
- transform
- transition
一、animation
我们通过一个简单的例子来理解：延迟1秒执行，从左0往右100px无限循环来回移动；
div {
width: 80px;
height: 80px;
background: #f30;
position: relative;
animation-name: test;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
/*
简写属性
animation: test 1s linear 1s infinite alternate;
*/
}
@keyframes test {
0% { left: 0;}
100% { left: 100px;}
}
image
【在线预览】
怎么样，是不是觉得so easy？对，就是这么简单！下面来详细讲解下这个代码：
语法：
@keyframes test {
0% { left: 0;}
100% { left: 100px;}
}
| keyframes name | from 起始 | to 结束 |
|---|---|---|
| 动画名称 | 等同0% | 等同100% |
当然也可以设置多个阶段，会有不同的效果哟，下面让我们来围着四周跑一圈：
@keyframes test {
0% { left: 0; top: 0;}
25% { left: 0; top: 50px;}
50% { left: 50px; top: 50px;}
75% { left: 50px; top: 0;}
100% { left: 0; top: 0;}
}
image
【在线预览】
动画属性：
- animation-name
绑定到选择器的 keyframe 名称，简单来说就是名字。
animation-name: keyframename | none;
- animation-duration
完成动画所花费的时间，单位秒或毫秒，例：3s、3000ms。
animation-duration: time;
- animation-timing-function
规定动画的速度曲线，默认ease。
| linear | ease（默认） | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) |
|---|---|---|---|---|---|
| 从头到尾的速度相同 | 以低速开始，然后加快，在结束前变慢 | 动画以低速开始 | 动画以低速结束 | 动画以低速开始和结束 | 贝塞尔曲线 |
image
【在线预览】
- animation-delay
规定在动画开始之前的延迟，很好理解，就是延迟（等待）多长时间再执行动画（单位秒或毫秒）。
animation-delay: time;
- animation-iteration-count
规定动画播放次数，默认1；n（次数），infinite（无限）。
animation-iteration-count: n | infinite;
- animation-direction
规定是否应该轮流反向播放动画；normal（正常播放），alternate（交替播放），reverse（倒序播放），alternate-reverse（反向交替播放）。
animation-direction: normal | alternate | reverse | alternate-reverse;
image
【在线预览】
- animation-fill-mode
规定动画在播放之前或之后，其动画效果是否可见。
forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。
animation-fill-mode : none | forwards | backwards | both;
- animation-play-state
规定动画正在运行还是暂停，paused（动画已暂停），running（动画正在播放）。
animation-play-state: paused | running;
image
【在线预览】
二、transform
transform可以用来设置元素的形状改变，主要有以下几种变形：
1.rotate - 旋转
旋转分为2D旋转和3D旋转；
正数为顺时针旋转，负数为逆时针旋转，单位：deg；
- transform-origin
旋转元素一般配合着transform-origin属性，transform-origin是用来设置旋转点的；
transfrom-origin:0px 0px; // 这里代表左上角0那个位置
transfrom-origin:center center; // 代表中心点，也是默认值
- 2D旋转
transform: rotate(45deg); // 顺时针旋转45度
image
【在线预览】
另外，我们可以结合animation，然后就可以出现以下效果，就可以一直转圈圈：
@keyframes test{
0%{ transform: rotate(0)}
100%{ transform: rotate(360deg);}
}
image
【在线预览】
- 3D旋转
transform: rotate3d(x,y,z,angle);
x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值。
y：是一个0到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值。
z：是一个0到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值。
angle：一个角度值，指定在3D空间旋转角度。
image
【在线预览】
- scale - 缩放
transfrom:scale(x,y);
x：表示水平方向缩放的倍数。
y：表示垂直方向缩放的倍数，y为可选参数，不设置则表示x，y同时缩放相同倍数。
image
【在线预览】
当然为了效果看起来看流程，我们结合animation使用，就可以看到一个由小变大的效果：
@keyframes test{
0%{ transform: scale(0.5)}
100%{ transform: scale(1.5);}
}
image
【在线预览】
- skew - 扭曲
transform: skew(x,y);
x：x轴(水平方向)倾斜
y：y轴(水平方向)倾斜
image
【在线预览】
这里我们设置的参数为：transform: skew(45deg,0)等同于transform: skew(45deg)，也就是x轴顺时针45度。
- translate - 移动
这个参数很简单，俗称：位移。
image
【在线预览】
三、transition
transition属性设置元素当过渡效果，CSS过渡目前是比较常用的，它一共有4个子属性：
- transition-property: 过渡属性，默认值：all；
- transition-duration: 过渡持续时间，默认值：0s；
- transiton-timing-function: 过渡函数，默认值：ease；
- transition-delay: 过渡延迟时间，默认值：0s；
div {
width: 80px;
height: 80px;
background: #be2323;
transition-duration: 2s;
transition-property: width;
transition-timing-function: linear;
transition-delay: 0s;
/* 简写属性
transition: width 2s linear 0s;
*/
}
div:hover{
width: 300px;
}
image
【在线预览】
4个子属性和文章第一大点：animation相同，认真看下来的朋友，都应该了解用法了，这里就不再做详述了。
总结
- 以上为CSS3几种动画方式，几大属性都可以相互结合使用，比如说transform配合transition过度，就会把本身变化缺失的过程补充完整，从而得到一个完善、流畅的动画效果。
- 当然学会了CSS3动画，不能把JS给遗忘了，CSS3+JS是可以写出很多酷炫效果及提升用户体验的，比如基本的点击播放动画，暂停动画，图片逐渐方法等等，就不一一说了，前端注重用户体验，相互的合理使用，用户体验是能做到极大的提升的。
- 更多的东西大家就自己去探索了，多读、多写，就会有提升！
- 大家如果有什么好的想法或见解，欢迎评论区沟通，谢谢！