示例代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>CSS3 碰撞反弹动画无限运动</title> 6 ????<style type="text/css"> 7 ????.container { 8 ????????width: 600px; 9 ????????height: 400px;10 ????????border: 1px solid #333;11 ????????position: relative;12 ????}13 ????.ball {14 ????????position: absolute;15 ????????left: 0;16 ????????top: 0;17 ????????width: 20px;18 ????????height: 20px;19 ????????border-radius: 20px;20 ????????border: 1px solid #999;21 ????????/* alternate：动画先正常运行再反方向运行，并持续交替运行 */22 ????????animation: horizontal 10s linear 0s infinite alternate, vertical 6s linear 0s infinite alternate;23 ????}24 ????@keyframes horizontal {25 ????????0% {26 ????????????left: 0;27 ????????}28 ????????100% {29 ????????????/* 运动最大距离为盒子长度减去球的长度 */30 ????????????left: calc(600px - 20px);31 ????????}32 ????}33 ????@keyframes vertical {34 ????????0% {35 ????????????top: 0;36 ????????}37 ????????100% {38 ????????????/* 运动最大距离为盒子高度减去球的高度 */39 ????????????top: calc(400px - 20px);40 ????????}41 ????}42 ????</style>43 </head>44 <body>45 <div class="container">46 ????<div class="ball"></div>47 </div>48 </body>49 </html>该效果可以通过JS随机设置运动时间，衍生出无数小球随机碰撞动画，也能用于雪花飞舞效果。
巧妙的使用css3的animate属性，可以实现各种炫丽效果。
CSS3之碰撞反弹动画无限运动
原文地址：http://www.cnblogs.com/linx/p/7569473.html