前端基础CSS3之动画模块

动画模块

• 动画三要素：运动名称、创建一个该名称的动画、动画持续时长

• 第一种框架格式：

  p{
      /*告诉系统运动的名称*/
      animation-name:move;
      /*告诉系统运动持续时间*/
      anination-duration:2s;
  }
  /*告诉系统创建一个名为move的运动框架*/
  @keyframes move{
      /*运动起始位置*/
      from{
          margin-left:0px;
      }
      /*运动结束位置*/
      to{
          margin-left:50px;
      }
  }

   

• 其他属性

  p{
      animation-name:move;
      animation-duration:2s;
      /*延迟*/
      animation-delay:2s;
      /*速度*/
      animation-timing-function:linear;
      /*执行次数*/
      animation-iteration-count:3;
      /*往返动画*/
      animation-direction:normal/alternate;
      /*执行状态*/
      animation-play-state:running/paused;  
      /*确定运动的开始和结束状态*/
      animation-fill-mode:none/forwards/backwards/both;
  }
  @keyframes move{
      from{
          margin-left:0px;
      }
      to{
          margin-left:50px;
      }
  }

   

• 第二种框架格式：

  @keyframes move{
      0%{
          margin-left:0px;
      }
      25%{
          margin-left:50px;
      }
      50%{
          margin-left:100px;
      }
      75%{
          margin-left:150px;
      }
      100%{
          margin-left:200px;
      }
  }

   

• 连写格式：

  animation:名称 时长 速度 延迟 次数 往返；