CSS3アニメーション：雲と飛行機を移動 - WEB制作の備忘録

　↓自動で動きます

Photoshopで素材を用意

Photoshopを開き200×200pxを新規作成
カスタムシェイプで、雲と飛行機をつくります
png-24／透過で書き出します

HTML+CSSで記述

HTMLを記述します
CSSを記述します

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS3アニメーション</title>
<style>
body {
  background: #0CF;
}
#cloud {
  background: url(img/cloud.png) no-repeat;
  width: 200px;
  height: 200px;
  -webkit-animation: cloud 20s linear infinite;
  animation: cloud 20s linear infinite;
}
@-webkit-keyframes cloud {
0% { transform: translate(0, 0); }
10% { transform: translate(100px, 10px); }
30% { transform: translate(400px, 0); }
100% { transform: translate(1300px, 10px); }
}
@keyframes cloud {
0% { transform: translate(0, 0); }
10% { transform: translate(100px, 10px); }
30% { transform: translate(400px, 0); }
100% { transform: translate(1300px, 10px); }
}

#airplane {
  background: url(img/airplane.png) no-repeat;
  width: 200px;
  height: 200px;
  -webkit-animation: airplane 10s linear infinite;
  animation: airplane 10s linear infinite;
}
@-webkit-keyframes airplane {
0% { transform: translate(1000px, 300px); }
100% { transform: translate(0px, 10px); }
}
@keyframes airplane {
0% { transform: translate(1200px, 300px); }
100% { transform: translate(0px, 10px); }
}
</style>
</head>
<body>
<div id="cloud"></div>
<div id="airplane"></div>
</body>
</html>

ポイント

アニメーション指定

#cloud {
  background: url(img/cloud.png) no-repeat;
  width: 200px;
  height: 200px;
  -webkit-animation: cloud 20s linear infinite;
  animation: cloud 20s linear infinite;
}

アニメーションの名前、秒数、直線に動く、永遠に

アニメーション内容

@-webkit-keyframes cloud {
0% { transform: translate(0, 0); }
10% { transform: translate(100px, 10px); }
30% { transform: translate(400px, 0); }
100% { transform: translate(1300px, 10px); }
}
@keyframes cloud {
0% { transform: translate(0, 0); }
10% { transform: translate(100px, 10px); }
30% { transform: translate(400px, 0); }
100% { transform: translate(1300px, 10px); }
}

上にベンダープレフィックス（各種ブラウザ対応webkitはSafari）を記述
translateの記述
X軸、Y軸の順番で並んでいます
%指定ができないので、ブラウザのサイズによっては繰り返しの位置がずれます