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

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

一、Transition过渡

1.定义

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

2.用法

transition:要过渡的属性  花费时间  运动曲线  何时开始;

1. 属性：想要变换的css属性，宽度、高度、背景颜色、内外边距都可以，如果想要所有的属性都变化过渡。
2. 花费时间：单位是秒（必须写单位）比如0.5s
3. 运动曲线：默认是ease（可以省略）（linear、ease、ease-in、ease-out、ease-in-out）
4. 何时开始：单位是秒（必须写单位）可以设置延迟触发，默认是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-stateanimation: <动画名称> <动画时间> <动画速度曲线> <动画延迟> <动画次数> <动画方向> <动画完成时的状态>

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;