css实现bounce动画

html:

<img className="bounce" src="https://avatar.csdnimg.cn/7/1/5/3_weixin_44207333.jpg" alt=""/>

css:

.bounce {
     
  animation: bounce 2.5s infinite 0.5s both;
  transform-origin: center bottom;
}

@keyframes bounce {
     
  0%,
  7%,
  25%,
  36%,
  45%,
  50% {
     
    animation-timing-function: ease-out;
    transform: translate3d(0, 0, 0);
  }

  15%,
  16% {
     
    animation-timing-function: ease-in;
    transform: translate3d(0, -42px, 0);
  }

  30% {
     
    animation-timing-function: ease-in;
    transform: translate3d(0, -24px, 0);
  }

  41% {
     
    animation-timing-function: ease-in;
    transform: translate3d(0, -12px, 0);
  }

  47% {
     
    animation-timing-function: ease-in;
    transform: translate3d(0, -3px, 0);
  }
}