CSS3 中最容易混淆的Transition Transform Animation 的理解

刚刚学习CSS3时，最让我头疼的是CSS3中新增的这三个动画事件，今天把这三个事件整理并说明一下：

一、Transition语法介绍

 过渡

transition-property ://指定过渡的性质，

transition-duration://指定这个过渡的持续时间

transition-delay://延迟过渡时间

transition-timing-function://指定过渡类型

ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

ease表示越来越慢

linear表示线性

ease-in表示先慢后快

ease-out表示先快后慢

ease-in-out表示先慢后快再慢

二、图片速记：

三、transition 实例：

a{

-moz-transition: background 0.5s ease-in,color 0.3s ease-out; 

-webkit-transition: background 0.5s ease-in,color 0.3s ease-out;

-o-transition: background 0.5s ease-in,color 0.3s ease-out;

-ms-transition: background 0.5s ease-in,color 0.3s ease-out; 

 transition: background 0.5s ease-in,color 0.3s ease-out; 

}

a:hover{

    background:blue; 

}

---

一、Transform 语法介绍

属性：拉伸，压缩，旋转，偏移。

transform: skew(35deg);偏斜35°

-->第一个参数对应 X 轴，第二个参数对应 Y 轴。第二个参数未提供，则默认值为。

transform:scale(1, 0.5);比例，X、Y轴的比例

transform:rotate(45deg);旋转45°

transform：translate(10px, 20px); 基于XY轴重新定位元素

transform: rotate | scale | skew | translate |matrix;

1. 旋转rotate
2. 移动translate
3. 缩放scale
4. 扭曲skew
5. 矩阵matrix

rotate旋转：

    rotate(angle)  属于2D旋转；

    rotate3d(x,y,z,angle)  属于3D旋转，transform:rotate3d(1,1,0,45deg)，1:表示沿着该轴旋转，0：表示不允许沿着该轴旋转，45deg：旋转的角度；

    rotateX(x)\rotateY(y)\rotateZ(z)  分别设置旋转轴角度； 

    transform:rotate(30deg)。使用rotate，需先有transform-origin属性的定义。transform-origin定义的是旋转的基点。如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。

    

 例子：

div{

-moz- transform: rotate3d(1,1,0,45deg);

-webkit- transform:  rotate3d(1,1,0,45deg);

-o- transform:  rotate3d(1,1,0,45deg);

-ms- transform:  rotate3d(1,1,0,45deg);

  transform: rotate3d(1,1,0,45deg);

}

translate移动：

        translate2d(x,y)

        translate3d(x,y,z)  属于3D转换，X：x轴方向的位距，Y：y轴方向的位距，Z：z轴方向的位距。

        translateX()、translateY、translateZ()  分别设置方向位移；

    例子：

div{

-moz-transform: translate3d(10px,10px,10px);

-webkit-transform: translate3d(10px,10px,10px);

-o-transform: translate3d(10px,10px,10px);

-ms-transform: translate3d(10px,10px,10px);

 transform: translate3d(10px,10px,10px);

}

scale缩放：

         scale(x,y,z)  义一个3D 拉伸, x:水平拉伸,y:垂直拉伸,z:Z方向的拉伸；scale(1,2,0.5);

        scaleX(),scaleY(),scaleZ() 分别定义x,y,z方向的拉伸；

skew扭曲：

        skew(x,y,z)

改变元素基点transform-origin

          transform-origin(X,Y):

        1、top left | left top 等价于 0 0 | 0% 0% 
        2、top | top center | center top 等价于 50% 0 
        3、right top | top right 等价于 100% 0 
        4、left | left center | center left 等价于 0 50% | 0% 50% 
        5、center | center center 等价于 50% 50%（默认值） 
        6、right | right center | center right 等价于 100% 50% 
        7、bottom left | left bottom 等价于 0 100% | 0% 100% 
        8、bottom | bottom center | center bottom 等价于 50% 100% 
        9、bottom right | right bottom 等价于 100% 100%

---

一、  Animation语法介  绍

@keyframes IDENT { from{ Properties:Properties value;}Percentage{ Properties:Properties value;}to{ Properties:Properties value;} }
  

 或者全部写成百分比的形式： @keyframes IDENT {
      0% { Properties:Properties value;}Percentage{ Properties:Properties value;} 100% { Properties:Properties value;} }

二、写法图示：

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]* 

animation-name 动画名称
animation-duration 是用来指定元素播放动画所持续的时间长
animation-timing-function 是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式
animation-delay 是用来指定元素动画开始时间
animation-iteration-count 是用来指定元素播放动画的循环次数，其可以取值<number>为数字，其默认值为“1”；infinite为无限次数循环。
animation-direction 是用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate  他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

animation-play-state 主要是用来控制元素动画的播放状态。其主要有两个值，running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样，可以通过paused将正在播放的动画停下了，也可以通过running将暂停的动画重新播放，我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。这个属性目前很少内核支持，所以只是稍微提一下。