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);
}
}