动画模块

• 动画模块和过渡模块的区别
  • 过渡模块需要人为去触发才会执行动画，而动画模块不需要触发

• 动画模块和过渡模块相同点

  • 1.都是用来给元素添加动画的
  • 2.过渡和动画都是系统新增的一些属性
  • 3.过渡和动画都需要满足三要素才会有动画效果

  动画的格式

    <!--动画三要素-->
    <!--1.告诉系统需要执行哪个动画-->
    animation-name:sin;
    <!--3.告诉系统需要执行动画的时间-->
    animation-duration:3s;
    <!--2.告诉系统我们需要自己创建一个名叫sin的动画-->
    @keyframes sin {
    from{}// 起始
    to{}// 终止
    }
  

    <!--内可以使用百分比做动画-->
    // 例如做一个盒子围绕矩形移动
    @keyframes sin {
      0%{
         left:0;top:0;
      }
      25%{
         left:300;top:0;
      }
      50%{
          left:300;top:300;
      }
      75%{
          left:0;top:300;
      }
      100%{
          left:0;top:0;
      }
    }
  

• 其他属性

  • animation-delay 延时
  • animation-timing-function 执行速度，默认ease
  • animation-iteration-count 执行次数，可以写infinite无限执行
  • animation-direction 是否往返，默认取值normal，为执行完回到起始位置重新开始动画，取值alternate为往返
  • animation-play-state 执行状态，默认running为执行，paused暂停
  • animation-fill-mode(了解) 指定动画等待状态和结束状态的样式
    • none 不做任何改变
    • forwards 让元素结束状态保持动画最后一帧的样式
    • backwards 让元素等待状态的时候显示动画第一帧的样式
    • both forwards和backwards结合

• 通过观察，动画有一定的状态

  • 等待状态
  • 执行状态
  • 结束状态:动画执行完毕，回到起始位置

动画模块连写格式

animation:动画名称 时长 运动速度 延迟时间 执行次数 往返动画;

• 简写

<!--三要素即可-->
animation:动画名称 时长;
// 实现动画名称
@keyframes 名称{
}