CSS3和HTML5技術給我們帶來了許多強大的動畫效果，下面給大家介紹幾個實現小球運動并反彈的demo。

實現一：使用CSS3動畫

下面是使用CSS3動畫實現的代碼：

<div id="demo">
<div class="ball"></div>
</div>
<style>
/*定義動畫*/
@keyframes move {
0% {left: 0;}
50% {top: 150px;}
100% {left: 150px;}
}
.ball {
/*動畫名稱*/
animation-name: move;
/*動畫持續時間*/
animation-duration: 2s;
/*動畫執行次數*/
animation-iteration-count: infinite;
/*動畫緩動方式*/
animation-timing-function: ease-in-out;
}
</style>

實現二：使用JavaScript

下面是使用JavaScript代碼實現的demo：

<div id="demo">
<div class="ball"></div>
</div>
<script>
var ball = document.querySelector('.ball');
var speedX = 2;
var speedY = 3;
var x = 0;
var y = 0;
function move() {
x += speedX;
y += speedY;
if (x < 0 || x + ball.clientWidth > document.documentElement.clientWidth) {
speedX = -speedX;
}
if (y < 0 || y + ball.clientHeight > document.documentElement.clientHeight) {
speedY = -speedY;
}
ball.style.left = x + 'px';
ball.style.top = y + 'px';
requestAnimationFrame(move);
}
move();
</script>