<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test{
position: absolute
left: 50px
top: 200px
width: 50px
height: 50px
border-radius: 50%
background: red
-webkit-animation: move 2s linear
-moz-animation: move 2s linear
-ms-animation: move 2s linear
-o-animation: move 2s linear
animation: move 2s linear
}
@keyframes move{
0%{
left : 50px
top: 200px
}
50%{
left: 150px
top: 100px
}
100%{
left: 250px
top: 200px
}
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
简单做了一个，反弹有些生硬。你可以自己调一调参数。修改的更符合力学原理。
