animation

给一个元素同时添加两种不一样线性的动画

.animation5 {
  opacity: 0;
  // 只需要用, 隔开就可以
  animation: opacityanimation 0.5s linear 1s, move 0.5s ease-in-out 1s;
  animation-fill-mode: forwards;
}
@keyframes topanimation {
  0% {
    top: calc(50% + 20px);
  }
  100% {
    top: 50%;
  }
}
@keyframes opacityanimation {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes move {
  0% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}