CSS3动画属性

css3动画效果突然发现吊炸天，在一些场景上使用一下动画效果，还是能够发挥出意想不到的效果，自己将css3属性稍微的整合一下，以便于自己以后的查阅，同时方便大家阅览，希望有一定的提升。

1、css3过渡属性- transition

这是css3中的一个过渡属性，一般需要配合鼠标事件触发，transition里面可以设置四个值，这是它的简写形式：
transition: 属性值1 属性值2 属性值3 属性值4

• 属性值1：需要参与过渡属性 all （能支持过渡属性的都会过渡变换 默认值）
• 属性值2：过渡时间 （s 秒 ， ms 毫秒）
• 属性值3：延迟时间 （s 秒 ， ms 毫秒）
• 属性值4：动画类型 （匀速，匀加速，匀减速…）
  

2、创建动画 - animation

创建动画最主要是制定关键帧（@keyframes）， 然后使用animation调用关键帧。

1、 animation 属性

• animation-name 关键帧的名称
• animation-duration 动画的持续的时间
• animation-timing-function 动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线）
• animation-delay 动画的延迟
• animation-iteration-count 动画运动的次数（默认情况下运动1次） infinite(无限循环)
• animation-direction 运动的方向
  — 属性值：
  - - - reverse：反方向运行 （ 让关键帧从后往前执行 ）
  - - - alternate：动画先正常运行再反方向运行，并持续交替运行
  - - - alternate-reverse：动画先反运行再正方向运行，并持续交替运行
• animation-play-state
  —属性值：
  - - - paused暂停
  - - - running运动
  简写方式：animation:关键帧的名称 动画运动的时间 linear(匀速) 动画延迟的时间。

2、 制定关键帧-@keyframes

	@keyframes 关键帧的名称{
	第一种：   from{} //开始 状态
              　　to{} // 结束状态
              　}
              　
   @keyframes 关键帧的名称{           　
    第二种    0%{
           //开始状态
            }
            25%{

            }
            50%{

            }
            ......
            100%{
            //结束状态
            }
        }

注：transition 和 animation 的区别是什么？？？？
  transition 需要添加事件才能触发，而animation却不需要添加事件就能够触发效果。
接下来我们将位移，旋转，缩放，倾斜，都统统整理一下：

1、 位移 - translate()

transform:translate(x,y,z);

属性	Value
translate(参数1，参数2，参数3)	(x,y,z)
translateX()	在X轴移动的距离
translateY()	在Y轴移动的距离
translateZ()	在Z轴移动的距离(不能为百分比)

说明：参数的设置:如果是正值的情况下：往右往下 ， 负值：往左往上

2、 缩放 - scale()

transform:scale(x,y,)或者 transform:scale3d(x,y,z);

属性	Value
scale3d(参数1，参数2，参数3)	(x,y,z)
scaleX()	X轴缩放的比例
scaleY()	Y轴缩放的比例
scaleZ()	Z轴缩放的比例

说明：0<参数<1  缩小
    参数=1   不变
    参数>1   放大

3、 旋转 - rotate()

transform:rotate();属性值为一个度数（deg）默认情况下绕着中心点转动，那么这里的中心点可以称之为 变形原点：

• transform-origin:水平方向 垂直方向; 它可以改变旋转中心的位置，

属性	Value
rotate3D(x,y,z,a)	(x,y,z,a)
rotateX()	以X轴为中心旋转
rotateY()	以Y轴为中心旋转
rotateZ()	以Z轴为中心旋转

属性值的取值范围：
- x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
- y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
- z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
- a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

4、 倾斜- skew()

元素转动给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

属性	Value
(参数1，参数2)	(x,y)
skewX()	以X轴为参考线
skewY()	以Y轴为参考线

注：倾斜不会改变盒子的高度

5、 加餐

1、景深 - perspective

简单来讲就是我们对屏幕的距离，我们看到的事物越大，说明离我们越近，perspective的值越小，效果越不好。perspective用于激活一个3D空间，属性值就是景深大小（默认none无景深），两种方法都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间，如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉

2、景深两种写法

第一种：
直接给父元素添加属性
perspective:1200px;
第二种：
给子元素添加属性
transform:perspective(1200px);