css 弹跳动画

Posted 2021-05-13

.arrow {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
}

.arrow {
  -moz-animation: arrow 2s infinite;
  -webkit-animation: arrow 2s infinite;
  animation: arrow 2s infinite;
}

@keyframes arrow {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}