アニメーション1

Duke（Javaのマスコット）を動かしてみましょう。

<style>
#duke {
  position: relative;
  left: 0px;
}
</style>

<script>
let duke, x, timer;
function move() {
  x += 10;
  duke.style.left = x + 'px';
  if (x > 500) clearInterval(timer);
}
window.onload = function() {
  x = 0;
  duke = document.getElementById('duke');
  timer = setInterval(move, 100);  // 100msごとにmove()を呼ぶ
}
</script>

<img id="duke" src="duke.gif" alt="Duke">

必要なCSSは次のものです：

• position: relative; 相対座標
• position: absolute; 絶対座標
• left: 距離; 左からの距離
• right: 距離; 右からの距離
• top: 距離; 上からの距離
• bottom: 距離; 下からの距離

必要なJavaScriptの関数は次のものです：

• setInterval(関数, 時間間隔); 時間間隔（単位：ミリ秒）ごとに関数を実行

解除する必要があるときは次のように setInterval() の戻り値を保存しておきます。

• timer = setInterval(関数, 時間間隔); 時間間隔（単位：ミリ秒）ごとに関数を実行
• clearInterval(timer); 上の設定を解除