CSS3でつくれちゃうアニメーション！ループして流れる雲

公開日：2014/10/23

今回はCSS3で流れる雲のアニメーションをつけてみましょう！
背景はグラデーションで指定するので、雲の画像の背景は透明にしておきます。

<body>
	<div id="wrap">
		<div id="cloud">
		</div>
	</div>
</body>

<body>

</div>

</body>

HTMLはこれだけでOK！

CSSでアニメーションをつける

#wrapの背景にグラデーションを指定します。

#wrap{
	width:800px;
	height:500px;
	margin:30px auto 0;
	background-image: -o-linear-gradient(bottom, #4DB6EB 0%, #99D8DE 100%);
	background-image: -moz-linear-gradient(bottom, #4DB6EB 0%, #99D8DE 100%);
	background-image: -webkit-linear-gradient(bottom, #4DB6EB 0%, #99D8DE 100%);
	background-image: -ms-linear-gradient(bottom, #4DB6EB 0%, #99D8DE 100%);
	background-image: linear-gradient(to bottom, #4DB6EB 0%, #99D8DE 100%);
}

#wrap{

width:800px;

height:500px;

margin:30px auto 0;

}

次に雲の画像を追加してアニメーションをつけていきます。

#cloud{
	width:800px;
	height:800px;
	background:url(../images/clouds.png);
	animation: cloudmove 20s linear infinite;
	-webkit-animation: cloudmove 20s linear infinite;
	-moz-animation: cloudmove 20s linear infinite;
}

#cloud{

width:800px;

height:800px;

background:url(../images/clouds.png);

animation: cloudmove 20s linear infinite;

-webkit-animation: cloudmove 20s linear infinite;

-moz-animation: cloudmove 20s linear infinite;

}

animationのcloudMoveの部分は@keyframesの名前の指定で、自由に名前をつけることができます。
linearは一定の早さを、infiniteは無限にループする指定をしています。

@keyframes cloudmove {
	0% {background-position: 0 0;}
	25% {background-position: 200px 5px;}
	50% {background-position: 400px 0;}
	75% {background-position: 600px 5px;}
	100% {background-position: 800px 0;}
}
@-webkit-keyframes cloudmove {
	0% {background-position: 0 0;}
	25% {background-position: 200px 5px;}
	50% {background-position: 400px 0;}
	75% {background-position: 600px 5px;}
	100% {background-position: 800px 0;}
}
@-moz-keyframes cloudmove {
	0% {background-position: 0 0;}
	25% {background-position: 200px 5px;}
	50% {background-position: 400px 0;}
	75% {background-position: 600px 5px;}
	100% {background-position: 800px 0;}
}