css3动画实现高级弹弹弹

<style><!--
body{
background-color: greenyellow;
}
ul{
margin-top: 100px;
}
ul li{
list-style: none;
position: relative;
}
img{
width: 6.25rem;
height: 4.1625rem;
animation: bounce 1s ease 0s infinite both;

}

@keyframes bounce {
0%,20%,53%,80%,to {
-webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
-moz-animation-timing-function: cubic-bezier(.215,.61,.355,1);
-ms-animation-timing-function: cubic-bezier(.215,.61,.355,1);
animation-timing-function: cubic-bezier(.215,.61,.355,1);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0)
}

40%,43% {
-webkit-transform: translate3d(0,-30px,0);
-moz-transform: translate3d(0,-30px,0);
-ms-transform: translate3d(0,-30px,0);
transform: translate3d(0,-30px,0)
}

40%,43%,70% {
-webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
-moz-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
-ms-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
animation-timing-function: cubic-bezier(.755,.05,.855,.06)
}

70% {
-webkit-transform: translate3d(0,-15px,0);
-moz-transform: translate3d(0,-15px,0);
-ms-transform: translate3d(0,-15px,0);
transform: translate3d(0,-15px,0)
}

90% {
-webkit-transform: translate3d(0,-4px,0);
-moz-transform: translate3d(0,-4px,0);
-ms-transform: translate3d(0,-4px,0);
transform: translate3d(0,-4px,0)
}
}
--></style>
<p>animation:both</p>
<ul>
<li><img src="https://img1.baidu.com/it/u=1331818610,1238650205&fm=26&fmt=auto" /></li>
</ul>
<div>参考网站：http://www.100sucai.com/css3/1.html</div>