背景移動７-１■CSS 上端移動　右へ

●2016/06/18：CSSのみ使用なので、JavaScriptのグローバル変数はありません。
CSSだけを使用した body の上端横並びの背景移動の、横移動です。
動いているのは背景画像なので、上にタイトルや文章が書けます。そして画像も置けます。
サンタの画像はGIFアニメの背景透過画像です。
CSSの横移動、縦移動、斜め移動の書き方については、背景移動１-１■CSS box背景移動の説明から。
また「body{animation: bMove 9s linear infinite;～～～}」の「linear」を修正すると、速度変化を付けられます。
その修正方法は、Lopan.jp のanimationプロパティを参考にしてみて下さい。

速度が違うだけで、CSS は■背景移動３-１■CSS 空の全面背景移動■と同じです。
ただ CSS での背景画像の指定が、「敷詰」ではなく「repeat-x（上端横並び）」になっているだけです。

JavaScript使用の　上端移動　右へはこちら　→　背景移動７■上端移動　右へ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>背景移動７-１■CSS 上端移動　右へ</title>

<!--★ここからコピー-->
<style type="text/css"><!--
body{
animation: bMove 15s linear infinite;/*★必須。移動の「bMove」の時間指定。1sは1秒。小さいほど速い*/
background: url(kc28.png) #f5f5d3 repeat-x;/*★背景画像、背景色薄茶色、横の繰り返し指定。背景画像の実寸は横515px縦200px*/
}

/*★必須。移動の動きの指定。名前は「bMove」*/
@keyframes bMove {
0% {background-position: 0 0;}
100% {background-position: 515px 0;}/*★横移動の時は必ず使用する背景画像の横幅を記述。マイナス指定で逆向き*/
}

/*★タイトル文字指定。不要なら削除*/
.test1{
color: #fff;/*★文字色　白*/
font-size:32px;/*★文字サイズ指定*/
font-weight: bold;/*★太字指定*/
opacity:0.7;/*★透過指定。文字色を薄くする。お好みで*/
text-shadow: 5px 5px 5px #888;/*★影指定。お好みで*/
}
--></style>
<!--★ここまでコピー-->

</head>
<body>

<p class="test1">◆◆動くJavaScript◆◆</p><!--★タイトル文字。見本のため削除-->

<img src="katu1.gif" style="position:absolute; top:100px; right:200px;width:205px;height:36px;"><!--★サンタクロース画像。見本のため削除-->

</body>
</html>

背景移動７-１■上端移動 右へ UP日時 : 2016/06/18

　背景移動７-１■上端移動　右へ　　　　　UP日時 : 2016/06/18