sakura*sakura

バルーンをループで上げるCSSアニメーションを、「background-position」で動作させたら、画面描写が重いのなんの。
iPhoneのsafariで見ていたら、iPhoneがすごい勢いで熱を持つ。

という事で、移動アニメーションは「transform:translate3d()」を使ってGPUで動かす方式に変更。

・・・そしたら今度はループのつなぎ目でブランク（空白）が生じてしまうという問題が。。

苦肉の策として編み出したのがこちらのソース。

・動かす要素をHTMLに追加。（元のものとまったく同じものを設置。）
・CSSで、増やした方の要素を、時間差の周回遅れでanimation実行。

要素を増やさないでも、animationの複数設定（カンマ区切りのタイプ）でイケそうだけど、なぜか動作しなかった。
というわけで、最終的にこれを採用。

手は混んでるけど、目的通り、ちゃんと動作は軽くなった。

HTML

画面構成のフレームは３枚で、奥行きを出す感じで３層構造の設計。「ballon_back」「ballon_middle」「ballon_front」。
同じ要素を、二重に用意。（コメントで「2」ってついてるのを追加した。）

<div class="ballon ballon_back">/* 背景（奥）1 */</div>
<div class="ballon ballon_middle">/* 背景（真ん中）1 */</div>
<div class="ballon ballon_front">/* 背景（前）1 */</div>

↓

<div class="ballon ballon_back">/* 背景（奥）1 */</div>
<div class="ballon ballon_back">/* 背景（奥）2 */</div>
<div class="ballon ballon_middle">/* 背景（真ん中）1 */</div>
<div class="ballon ballon_middle">/* 背景（真ん中）2 */</div>
<div class="ballon ballon_front">/* 背景（前）1 */</div>
<div class="ballon ballon_front">/* 背景（前）2 */</div>

CSS

.ballon_front,
.ballon_middle,
.ballon_back{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	background-position:0 0;

	-webkit-animation:ballon_move 40s linear infinite;
	-moz-animation:ballon_move 40s linear infinite;
	-ms-animation:ballon_move 40s linear infinite;
	animation:ballon_move 40s linear infinite;
}
.ballon_front{
	height:1000px;
	background-image:url("img/ballon1.png");
	background-size:auto 500px;
}
.ballon_middle{
	height:800px;
	background-image:url("img/ballon2.png");
	background-size:auto 400px;
}
.ballon_back{
	height:600px;
	background-image:url("img/ballon3.png");
	background-size:auto 300px;
}
.ballon:nth-child(even){  /* ★増殖した「2（奇数要素）」を、周回遅れでアニメーションさせる */
	-webkit-animation-delay:20s;
	-moz-animation-delay:20s;
	-ms-animation-delay:20s;
	animation-delay:20s;
	-webkit-animation-fill-mode:backwards;
	-moz-animation-fill-mode:backwards;
	-ms-animation-fill-mode:backwards;
	animation-fill-mode:backwards;
}

@keyframes ballon_move{
	0%{transform:translate3d(0,100vh,0);}
	100%{transform:translate3d(0,-100%,0);}
}
@-webkit-keyframes ballon_move{
	0%{transform:translate3d(0,100vh,0);}
	100%{transform:translate3d(0,-100%,0);}
}
@-moz-keyframes ballon_move{
	0%{transform:translate3d(0,100vh,0);}
	100%{transform:translate3d(0,-100%,0);}
}
@-ms-keyframes ballon_move{
	0%{transform:translate3d(0,100vh,0);}
	100%{transform:translate3d(0,-100%,0);}
}