CSS3中Transition过渡、Animation动画、Transform之2D&3D变换总结

css3中transition和animation都能够实现动画效果，所谓动画本质就是物体的一种状态变换成另外一种状态的过程呈现，我们可以结合2D或者3D变换做出很多酷炫的动画，下面针对这四部分分别做一个用法上的小结。

一、Transition过渡
1.定义

过渡动画：是从一个状态渐渐地过渡到另外一个状态
经常:hover 等等一起搭配使用，也就是说一般会经过一个动作触发之后，再进行变换。
2.用法

transition:要过渡的属性 花费时间 运动曲线 何时开始;
属性：想要变换的css属性，宽度、高度、背景颜色、内外边距都可以，如果想要所有的属性都变化过渡。
花费时间：单位是秒（必须写单位）比如0.5s
运动曲线：默认是ease（可以省略）（linear、ease、ease-in、ease-out、ease-in-out）
何时开始：单位是秒（必须写单位）可以设置延迟触发，默认是0s（可以省略）
3.口诀

谁做过渡给谁加

二、Animation动画
Animation动画其实是定义了多个关键帧，然后通过按照一定的时间顺序播放这些关键帧从而形成了动画。

1.基本使用

首先定义动画
再使用（调用）动画
.box{
//使用动画（使用一个动画最少要设置名称与动画时间）
animation-name: 动画名称;
animation-duration:1s;
...
}
#定义示例
@keyframes 动画名称 {
0% {
width:100px;
}
100% {
width:200px;
}
}
2.动画序列

0%是动画的开始，100%是动画的完成。
在@keyframes中定义某个css样式，就能创建由当前样式逐渐改变为新样式的动画效果。
动画是使元素从一种样式变换到另外一种样式的效果，你可以定义任意多的样式以及任意多的次数。
关键词"from"和"to"相当于“0%”和"100%"
3.动画属性

animation-name（动画名称）：规定@keyframes的动画名称（必须）
animation-duration（动画时间）：规定动画完成一个周期所花费的时间，单位是秒或者毫秒。（必须）
animation-timing-function（动画速度曲线）：linear、ease、ease-in、ease-out、ease-in-out、 steps()
animation-delay（动画延迟）：规定动画何时开始，默认是0
animation-iteration-count（动画次数）：规定动画被播放的次数，默认是1，infinite是一直播放。
animation-direction（动画方向）：规定动画是否在下一周期逆向播放，默认是"normal"，alternate是逆向播放。
animation-play-state（动画播放状态）：规定动画是否正在运行或者暂停，默认是running，pause是暂停
animation-fill-mode（动画完成时的状态）：规定动画结束后的状态，forwards是保持结束后的状态，backwards是返回到起始状态。
4.动画简写

#注意：简写的时候没有animation-play-state
animation: <动画名称> <动画时间> <动画速度曲线> <动画延迟> <动画次数> <动画方向> <动画完成时的状态>
5.steps() 分几步完成动画可参考示例

#代码示例
div{
width:0px;
height:30px;
background-color:red;
animation: ani 4s steps(5) forwards
}
@keyframes ani{
0% {
width:0px;
}
100% {
width:200px;
}
}
6.连续执行多个动画

#1.多个动画正常情况下是同时执行的
#2.如果需要形成按照顺序执行，可以通过animation-delay控制后动画执行的先后顺序
#3.以下示例就是第一个动画宽度变化1秒之后，第二个动画高度变化，就形成了按照顺序执行动画。
.box {
width: 0px;
height: 10px;
background-color: pink;
animation: ani1 1s forwards, ani2 5s ease 1s forwards;
}

@keyframes ani1 {
0% {
width: 0px;
}
100% {
width: 200px;
}
}

@keyframes ani2 {
0% {
height: 10px;
}
100% {
height: 200px;
}
}
三、2D变换
（1）2D变换之位移translate
改变元素在页面中的位置

1.语法

transform:translate(x,y); //沿着X轴与Y轴分别移动x与y的距离
transform:translateX(n); //沿着X轴移动n的距离
transform:translateY(n); //沿着Y轴移动n的距离
2.重点

定义2D变换中的移动，沿着X轴与Y轴移动元素
translate最大的优点是不会影响到其他元素的位置
translate中百分比单位是相对于自身元素的，例如：translate(50%,50%)
对行内标签没有效果
（2）2D变换之旋转rotate
2D旋转是指元素在2纬平面内进行顺时针或者逆时针旋转

1.语法

transform:rotate(角度)
2.重点

rotate里面是度数，单位是（deg），比如：rotate(45deg)
角度为正时，顺时针；负时，逆时针
默认旋转的中心点是元素的中心点
（3）2D变换之缩放scale
针对元素进行放大或者缩小

1.语法

transform:scale(x,y)
2.重点

注意其中的x,y使用逗号分隔
transform:scale(1,1)：宽和高都放大1倍相当于没有放大
transform:scale(2)：只写一个参数的时候，第二个参数相当于跟第一个参数一样
transform:scale(0.5,0.5)：缩小
scale最大的优势是不会因为自身大小的缩放影响到其他元素
（4）2D变换之元素中心点设置
我们可以设置元素变换的中心点

1.语法

transform-origin:x y
2.重点

注意后面的参数x与y用空格分开
x、y默认的变换的中心点是元素的中心点（50% 50%）
可以给x、y设置像素或者方位词（top left right bottom center）
（5）2D变换之综合写法注意事项
同时做多种变换时可以使用综合写法

1.语法

transform:translate(100) scale(1.1,2) rotate(180deg) ...
2.重点

当我们同时有位移和其他属性的变换的时候，一定要把位移变换放在最前面。
四、3D变换参考
（1）3D移动translate3d(x,y,z)
transform:translate3d(x,y,z)
transform:translateZ(n)
（2）3D旋转rotate3d(x,y,z)
transform:rotate3d(x,y,z)
（3）透视perspective
透视需要写在被观察元素的父盒子上面

#代码示例
body{
perspective:500px;
}
（4）3D旋转transform-style
控制子元素是否开启三维立体环境
transform-style:flat 子元素不开启三维立体环境，默认的
transform-style:preserve 子元素开启三维立体环境
代码是写给父级，但是影响的是子级

transform-style: preserve-3d;

作者：周星星的学习笔记
链接：CSS3中Transition过渡、Animation动画、Transform之2D&3D变换总结 - 简书