深入理解css3动画：animation、transform、transition

前言

在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;}
}

怎么样，是不是觉得so easy？对，就是这么简单！下面来详细讲解下这个代码：

语法：

@keyframes test {
    0% { left: 0;}
    100% { left: 100px;}
}

当然也可以设置多个阶段，会有不同的效果哟，下面让我们来围着四周跑一圈：

@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;}
}

动画属性：

• animation-name

绑定到选择器的 keyframe 名称，简单来说就是名字。

animation-name: keyframename | none;

• animation-duration

完成动画所花费的时间，单位秒或毫秒，例：3s、3000ms。

animation-duration: time;

• animation-timing-function

规定动画的速度曲线，默认ease。

• 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;

• 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;

二、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度

另外，我们可以结合animation，然后就可以出现以下效果，就可以一直转圈圈：

@keyframes test{
	0%{ transform: rotate(0)}
	100%{ transform: rotate(360deg);}
}

• 3D旋转

transform: rotate3d(x,y,z,angle);

x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值。

y：是一个0到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值。

z：是一个0到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值。

angle：一个角度值，指定在3D空间旋转角度。

• scale - 缩放

transfrom:scale(x,y);

x：表示水平方向缩放的倍数。

y：表示垂直方向缩放的倍数，y为可选参数，不设置则表示x，y同时缩放相同倍数。

当然为了效果看起来看流程，我们结合animation使用，就可以看到一个由小变大的效果：

@keyframes test{
	0%{ transform: scale(0.5)}
	100%{ transform: scale(1.5);}
}

• skew - 扭曲

transform: skew(x,y);

x：x轴(水平方向)倾斜

y：y轴(水平方向)倾斜

这里我们设置的参数为：transform: skew(45deg,0)等同于transform: skew(45deg)，也就是x轴顺时针45度。

• translate - 移动

这个参数很简单，俗称：位移。

三、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;
}

4个子属性和文章第一大点：animation相同，认真看下来的朋友，都应该了解用法了，这里就不再做详述了。

总结

• 以上为CSS3几种动画方式，几大属性都可以相互结合使用，比如说transform配合transition过度，就会把本身变化缺失的过程补充完整，从而得到一个完善、流畅的动画效果。

• 当然学会了CSS3动画，不能把JS给遗忘了，CSS3+JS是可以写出很多酷炫效果及提升用户体验的，比如基本的点击播放动画，暂停动画，图片逐渐方法等等，就不一一说了，前端注重用户体验，相互的合理使用，用户体验是能做到极大的提升的。

• 更多的东西大家就自己去探索了，多读、多写，就会有提升！

• 大家如果有什么好的想法或见解，欢迎评论区沟通，谢谢！