移动web知识总结day02

106 阅读1分钟

day02

空间转换:

视距 取值400px~1200px perspective: 800px;

perspective只是增加了近大远小的效果,并不是真正开启3d

开启3D效果 transform-style: preserve-3d;

动画:

调用动画

    animation: bigger 2s;

    @keyframes bigger {
     from   
     /* 规定的刚开始的状态,正常书写css样式
      width: 200px;*/
    } 

    to {
      /* 规定最终的状态 */
      width: 600px;
    }
  }

百分比可以实现阶段性的动画

 @keyframes bigger {
    50% {
      width: 500px;
      height: 300px;
    }

    100% {
      width: 800px;
      height: 500px;
    }
  }

animation复合属性(谁在调用动画就给谁设置):

    animation: change 2s steps(4) alternate infinite;

暂停动画

    animation-play-state: paused;