变形-transform 迅速变化 过渡-transition 缓慢变化 动画-animation 关键帧动画 --Css3笔记

1、变形-transform　迅速变化
2、过渡-transition 缓慢变化
3、动画-animation  关键帧动画

1、转换的原点
   默认情况下，原点是在当前物体的中心点上
   修改原点：
        属性：transform-origin
    值：1、x坐标  y坐标
           当前物体的左上点为 x:0 y:0
        2、宽度百分比 高度百分比
           0% 0% 左上点
           50% 50%中心点
           100% 100% 
        3、top：上
           bottom：下
           left：右
           center:中间
           center center 中间
           left top：左上方
     transform-orign:0;表示 所有轴的位置都将归到0点处
     transform-orign:50px 50px;表示 x轴在50像素处，y轴在50像素处
     transform-orign:50px 50px 50px;表示x轴 Y轴 z轴
2、变形2D
   旋转：rotate()
   位移：translate()
   缩放：scale()
   倾斜：skew()

   旋转：围绕一份参照原点（transform-orign）,旋转指定角度，默认为顺时针
   语法：transform:rotate(ndeg);
                          n为正  顺时针旋转
              n为负  逆时针旋转
        注意：rotate在旋转的过程中，不但能够旋转元素，同时能够旋转绘图的方向。如果配和着其他其他的变形来做的话，rotate在前的话
               ，会影响之后延坐标轴的其他变形。

               解决方案：如果配合其他变形一起来做，最好将rotate放在最后一个函数上

               位移：延坐标方向 移动指定的距离
               语法：translate(x轴移动距离，y轴的移动距离)；
                      x:正为右，负为左
                  y:正为下，负为上

                  transform:translate(50px 50px);

        注意位移不会影响其他元素位置，但可能会盖住周围元素
        其他两个单方向位移：
                translateX(距离)
            translateY(距离)

             缩放：将指定坐标轴上的坐标缩放指定的倍数
         语法：scale(倍数)
               倍数：0-1之间的小数  缩小
                      >1放大

            scale(倍数)表示等比缩放
            其他两个单方向缩放：
                          scaleX（倍数）
                      scaleY(倍数)

        倾斜：沿着坐标轴方向，倾斜指定角度
        语法：skew(ndeg);仅延X轴倾斜
              skew(ndeg,ndeg) 延X，y轴同时倾斜
              skewX(ndeg)
              skewY(ndeg)
              X轴：角度为正，向左倒
               角度为负，向右倒

              Y轴：角度为正，向上倾斜
               角度为负，向下倾斜

3、3D变形
   元素，要从立体角度观察
   坐标轴，X Y Z轴
     perspective
     设定假定的人眼位置到投影平面的距离

位移：
     3D位移可以改变元素在Z轴上的位置
     translate(z);
     translate3d(x y z)

旋转：transform:rotateX(ndeg);
        rotateY(ndeg);
        rotateZ(ndeg);

缩放：
      transform:
        scale(z);
        scale(x y z);
 

 过渡属性
    1、属性：transition-property
              transition-property:background,color;

    2、过渡时间：
       属性名：transition-duration:
                以秒（s）或（ms）为单位
            transition-duration:5s;

    3、过渡函数：
           属性名：transition-timing-function
           ease：默认值，慢速开始  快速变快 慢速结束
           linear:匀速过渡
           ease-in:慢速开始，加速效果
           ease-out:以慢速结束，，减速效果
           ease-in-out；一慢速开始和结束，中间先加速后减速

           
    4、过渡延迟
          属性名：transition-delay
          以秒或毫秒为单位

    5、整合transition属性
        transition:属性名 持续时间 过渡函数 [延迟]
               属性名 持续时间 过渡函数 [延迟]

2、关键帧动画
   关键帧：动画执行过程中，物体在某一位置上的特殊状态
   关键帧动画：使用连续的关键帧，控制物体连续的状态变化
   什么时候使用关键帧动画：
   1、连续有规律的过渡-————transition
   2、无规律的连续变化——————动画 animation
   如何实现动画
   两大步
   1、定义关键帧
    @keyframes 动画名{
        from | 0%{
            css样式
            动画开始的状态
        }

        percent{
                
        }

        to{
            css样式
            动画结束的状态
        }
     }
     @keyframes change{
        from|0%{
            background:red;
        }
        10%
        {
            background:yellow;
        }
        50%
        {
            background:green;
        }
        to|100%
        {
            background:black;
        }
     }
    浏览器兼容性：
    @keyframes:IE 火狐
    @-webkit-keyframes:chrome Safair
    @-o-keyframes:Opear

   2、触发动画（调用动画）
    属性：animation
           animatin；动画名 持续时间 速度类型（linear ease ease-in ease-out...）
           如何：
           1、写在非伪类选择器中，页面加载则执行动画
           2、写在伪类中，伪类触发时则播放动画
        浏览器兼容性：
            -webkit-animation:Chrome ,Safair
        -o-animation:Opear

  3、动画子属性

         1、animation-name  @keyframes(动画)名称
     2、animation-duration：动画时长
     3、animation-timing-function:动画速度函数
     4、animation-delay：动画的延迟时间
        animation:name duration timing-function
     5、animation-iteration-count:播放次数
        取值：1、具体数值
              2、infinite(无限次播放)

    6、animation-direction:动画播放方向
        取值：1、normal（正常播放）
              2、alternate 轮流播放
             奇数次数：正向播放
             偶数次数：反向播放

        animation:name duration timing-function iteration-ount direction
    7、animation-fill-mode
       动画播放后的效果
                 备选值：
                1、none：不改变默认行为
            2、forwards:动画完成后保持最后一个属性状态
            3、backwards:动画完成后显示开始属性状态
            4、both

    8、animation-play-state
       控制动画暂停与播放
       备选值：
            1、paused:暂停动画
        2、running:播放动画

       使用场合：1、配合伪类选择器
                  2、