变形-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、
    

你可能感兴趣的:(变形-transform 迅速变化 过渡-transition 缓慢变化 动画-animation 关键帧动画 --Css3笔记)