Css3 动画

Css3 动画

一、2D动画（transform）

 1.浏览器支持

2.transform：translate  /*移动*/

    translateX( )    /*水平移动*/

    translateY( )   /*垂直移动*/

    translate(x,y)   

注：移动的值：左负右正，上负下正，单独定义时X Y必须大写

  3.transform:scale  /*缩放*/

        scaleX( )/scaleY( )/scale(x,y)

注：无单位，0-1缩小/大于1放大

  4.transform：rotate（angle） /*旋转*/

注：一个值，平面内，单位：deg

5.transform:skew  /*倾斜*/

     skewX(angle)/skewY(angle )/skew(x-angle,y-angle)

注：单位deg，除了精确角度也可用right/bottom/left/top来定义

6.transition（用来定义动画的过渡）

      transition:property  duration timing-fuction  delay

      property:设置过渡效果的css动画属性名称（可以用all代替所有）

      duration:设置完成过渡所需时间

      timing-function:设置效果速度曲线（linear/ease/ease-in/ease-out）

      delay：过渡延迟

 注:无延迟且只设置对象所有动画的时间可简写: transition:ns

  7.设置动画变形的参考点

            transform-origin:X%Y%

  注：水平垂直不仅可以精确定位还可以用left/right/top/bottom定位，默认参考点为中心

二、3D动画旋转

          transform：rotate(x,y)/rotateX( )/rotateY( )

三、自定义动画

   1. 定义动画

         @keyframesname form{…}to{…}/百分比划分动画时间

   2. 调用定义的动画

      animation：name durationtiming-fuction delay infinite/n alternate reverse

           name:自定义动画的名称

           duration:设置完成动画所需时间

           delay：过渡延迟

           infinite/n:重复/重复n次

           alternate：第二遍倒着原路返回动画

           reverse：反向播放动画

           timing-function:设置效果速度曲线 

                linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n.n,n)

    linear：匀速

    ease:慢开始，中间快，慢结束

    ease-in：慢开始

    ease-out：慢结束

    ease-in-out：慢开始和慢结束

    cubic-bezier（n,n,n,n）：速度函数 , 0<n<1