使用Animation

css实现

常见属性

.square {
  width: 100px;
  height: 100px;
  background-color: gold;
  animation-name: move;
  animation-duration: 2s;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-play-state: paused;
  /* animation: 2s 0s 2 alternate running move;*/
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(100vw - 140px));
  }
}

注意：animation-direction: alternate与animation-direction: reverse是不同的逻辑！

animation-play-state: paused光写在css中没有什么意义，与js结合动态赋予css选择器才有作用。 

 animation composition

假设我们有以下两个动画：

.square {
  width: 100px;
  height: 100px;
  background-color: gold;
  transform: rotate(45deg); 
  animation: 2s ease-in-out infinite alternate move,
    0.3s ease-in-out infinite alternate bounce;
  animation-composition: add
}


@keyframes move {
  0% {
    transform: translateX(0) rotate(45deg);
  }
  100% {
    transform: translateX(calc(100vw - 140px));
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0);
    /* margin-top: 0px; */
  }
  100% {
    transform: translateY(100px);
    /* margin-top: 100px; */
  }
}

/* animation-composition: replace;
  0% -> transform: translateX(0);
  100% -> transform: translateX(calc(100vw - 140px));
*/
/* animation-composition: add;
  0% -> transform: rotate(45deg) translateX(0) rotate(45deg);
  100% -> transform: rotate(45deg) translateX(calc(100vw - 140px));
*/
/* animation-composition: accumulate;
  0% -> transform: translateX(0) rotate(90deg);
  100% -> transform: rotate(45deg) translateX(calc(100vw - 140px)) ;
*/

默认情况下，animation-composition：replace，后面的动画会把前面的动画相同属性覆盖掉，如果你想共同起作用设置如下：animation-composition: add。如果你想把其中一些变换累计在一起的最后  ，设置如下：animation-composition: accumulate