WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

CSS3アニメーションで雲を動かす

f:id:mmmmofu:20160810220431p:plain

雲を横に動かすアニメーション

http://efu.sakura.ne.jp/web/cloud/

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS3アニメーションで雲を動かす</title>
<style>
body,html {
  width: 100%;
  height: 100%;
  background: skyblue;
  overflow: hidden;
}
#kumo {
  width: 100px;
  height: 30px;
  background: url(img/cloud.png)no-repeat;
  background-size: 100px;
  -webkit-animation: kumo 20s linear infinite;
  animation: kumo 20s linear infinite;
}
#kumo2 {
  width: 200px;
  height: 60px;
  background: url(img/cloud.png)no-repeat;
  background-size: 200px;
  -webkit-animation: kumo2 15s linear infinite;
  animation: kumo2 15s linear infinite;
}
@-webkit-keyframes kumo {
  0% { transform: translate(0,0); }
  10% { transform: translate(130px,15px); }
  20% { transform: translate(260px,0); }
  30% { transform: translate(390px,15px); }
  40% { transform: translate(520px,0); }
  50% { transform: translate(650px,15px); }
  60% { transform: translate(780px,0); }
  70% { transform: translate(910px,15px); }
  80% { transform: translate(1040px,0); }
  90% { transform: translate(1170px,15px); }
  100% { transform: translate(1300px,0); }
}
@keyframes kumo {
  0% { transform: translate(0,0); }
  10% { transform: translate(130px,15px); }
  20% { transform: translate(260px,0); }
  30% { transform: translate(390px,15px); }
  40% { transform: translate(520px,0); }
  50% { transform: translate(650px,15px); }
  60% { transform: translate(780px,0); }
  70% { transform: translate(910px,15px); }
  80% { transform: translate(1040px,0); }
  90% { transform: translate(1170px,15px); }
  100% { transform: translate(1300px,0); }
}
@-webkit-keyframes kumo2 {
  0% { transform: translate(0,0); }
  10% { transform: translate(130px,15px); }
  20% { transform: translate(260px,0); }
  30% { transform: translate(390px,15px); }
  40% { transform: translate(520px,0); }
  50% { transform: translate(650px,15px); }
  60% { transform: translate(780px,0); }
  70% { transform: translate(910px,15px); }
  80% { transform: translate(1040px,0); }
  90% { transform: translate(1170px,15px); }
  100% { transform: translate(1300px,0); }
}
@keyframes kumo2 {
  0% { transform: translate(0,0); }
  10% { transform: translate(130px,15px); }
  20% { transform: translate(260px,0); }
  30% { transform: translate(390px,15px); }
  40% { transform: translate(520px,0); }
  50% { transform: translate(650px,15px); }
  60% { transform: translate(780px,0); }
  70% { transform: translate(910px,15px); }
  80% { transform: translate(1040px,0); }
  90% { transform: translate(1170px,15px); }
  100% { transform: translate(1300px,0); }
</style>
</head>
<body>
<div id="kumo"></div>
<div id="kumo2"></div>
</body>
</html>
</html>