1. animation(动画)属性

语法

animation： name duration timing-function delay iteration-count direction

值 描述
animation-name 规定需要绑定到keyframe选择器的名称
animation-duration 规定完成动画所花费的时间，以秒计
animation-timing-function 规定动画速度曲线
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
实例
<body>
	<div class="animation-test">
	  <h3>CSS动画</h3>
	  <div class="animation-body"></div>
	</div>
</body>
<style scope lang="less">
// CSS 动画
.animation-test {
   
  width: 500px;
  height: 150px;
  background-color: darkcyan;
  .animation-body {
   
    width: 150px;
    height: 100px;
    // 位置移动时必须加上相对定位
    position:relative;
    // animation: @param 动画样式 动画时间 动画重复次数(infinite 无限)
    animation: myAnimation 4s infinite;
    /**
      animation-direction: 
        @param 
        normal: 正常播放
        reverse: 动画反向播放
        alternate: 动画在奇数次正向播放,在偶数次反向播放
        alternate-reverse: 动画在奇数反向播放,偶数次正向播放
    */
    animation-direction: alternate;
    background-color: blue;
  }
}
@keyframes myAnimation {
   
  // 百分比规定变化发生的时间('from'和'to'等同于0% 和 100%)
  // 0% {
   
  //   left: 0px;
  //   background-color: rgb(9, 9, 248);
  // }
  // 25% {
   
  //   left: 100px;
  //   background-color: rgb(92, 4, 175);
  // }
  // 50% {
   
  //   left: 200px;
  //   background-color: rgb(4, 5, 99);
  // }
  // 100% {
   
  //   left: 350px;
  //   background-color: black;
  // }
  from {
   
    left: 0px;
    bottom: 0px;
    background-color: blue;
  }
  to {
   
    left: 350px;
    bottom: 40px;
    background-color: rgb(0, 0, 0);
  }
}
</style>

效果