css：关于transition，transform，animation的特效与动画

我们写css动画，必不可少会用到animation跟transform，transition，但是经常搞混使用，傻傻分不清楚

下面来讨论讨论他们用到的场景跟使用方式

w3c里transform api如下

none	定义不进行转换。	测试
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	测试
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。	测试
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。	测试
translateY(y)	定义转换，只是用 Y 轴的值。	测试
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。	测试
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。	测试
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。	测试
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。	测试
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。	测试
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。	测试
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。	测试
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	测试
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。	测试
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。	测试
perspective(n)	为 3D 转换元素定义透视视图。	测试

一般使用方法      

  1.transform：translate(50px, 30px)   根据给定的 left（x 坐标） 和 top（y 坐标）

div:hover {
    width:200px;
    transform: translate(50px, 30px);
    -webkit-transform: translate(50px, 30px);
    -o--transform: translate(50px, 30px);
    -mz-transform: translate(50px, 30px);
    -ms-transform: translate(50px, 30px);
}
      

2.transform: rotate(20deg);    旋转20度

3.transform: scale(1.5, 0.8); /*宽度变为原来的1.5倍，高度变为原来的0.8倍*/

div:hover {
transform: scale(1.2, 0.8);
}

      

transition 与 animiation

transition 必须靠事件触发，可以是hover

1. transition： width 2s ease 2s； // property duration timimgfunction delay；过渡、、

div {
    width:100px;
    height:100px;
    background: #000;

}
div:hover {
    width:200px;
    transition: width 2s ease-in-out 1s;//fread
}      

animation

简写属性形式:

animation:

[animation-name] [animation-duration] // 动画的名称、持续时间

[animation-timing-function][animation-delay] // 关于时间的函数(properties/t)、延迟时间

[animation-iteration-count] [animation-direction] // 播放次数、播放顺序

[animation-fill-mode] [animation-play-state]; // 播放前或停止后设置相应样式、控制动画运行或暂停

1.animation-timing-function

属性定义了动画的播放速度曲线。

可选配置参数为:

ease

、

ease-in

、

ease-out

、

ease-in-out

、

linear

、

cubic-bezier(number, number, number, number)

2.动画方向（animation-direction）

animation-direction

属性表示CSS动画是否反向播放。 可选配置参数为:

single-animation-direction = normal | reverse | alternate交替播放 | alternate-reverse

3.动画迭代次数（animation-iteration-count）

animation-iteration-count

该属性就是定义我们的动画播放的次数。次数可以是1次或者无限循环。

默认值只播放一次。

single-animation-iteration-count = infinite | number

4.动画填充模式（animation-fill-mode）

animation-fill-mode是指给定动画播放前后应用元素的样式。

single-animation-fill-mode = none | forwards | backwards | both

5.动画播放状态（animation-timing-function）

animation-play-state:

 定义动画是否运行或者暂停。可以确定查询它来确定动画是否运行。

默认值为running

single-animation-timing-function = running | paused