css3を使って文字を動かす（横方向）

以前、CSS3のanimation機能を使って文字を縦方向に動かしました。

今回はモデルとしているキリンのサイトにあるような、テキストが横に動いていくバージョンに変更します。
横方向に動かす時にはX方向の座標とY方向の座標をどう取れば良いかしっかりと理解しましょう。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS3・アニメーション</title>
<style>
html, body, div, ul, li {
 margin: 0;
 padding: 0;
 font-size: 100%;
 line-height: 1.0;
}
img {
 border: 0;
 vertical-align: bottom;
}
ul {
 list-style: none;
}

/*スタイル*/
body {
	background: #000;
}
#news {
 width: 600px; /*文字の数のよって可変*/
 height: 30px; /*3行あるliを1行だけ表示させるため*/
 overflow:hidden; /*3行あるliを1行だけ表示させるため*/
 margin: 100px auto 0;
 font-size: 20px;
 text-align: center;
}
#news li {
 height: 24px;  /*3行あるliを1行だけ表示させるため*/
 line-height: 24px;  /*3行あるliを1行だけ表示させるため*/
 padding: 3px;
 color: #FFFFFF;
}
.news-ticker {
  animation: ticker 10s infinite;
  /*アニメーションプロパティのショートハンド①keyframesに付ける名前②アニメの時間③ループの回数*/
}

@keyframes ticker {
/* 1行目 */
 0% { opacity:1;transform: translate(0,0);}
 28% { opacity:1;transform: translate(0,0);}
 33% { opacity:0;transform: translate(-400px,0); }
/* 2行目 */
 34% { opacity: 0;transform: translate(400px,-30px);}
 39% { opacity: 1;transform: translate(0,-30px);}
 61% { opacity: 1;transform: translate(0,-30px);}
 66% { opacity: 0;transform: translate(-400px,-30px);}
/* 3行目 */
 67% { opacity: 0;transform: translate(400px,-60px);}
 72% { opacity: 1;transform: translate(0,-60px);}
 90% { opacity: 1;transform: translate(0,-60px);}
 98% { opacity: 0;transform: translate(-400px,-60px);}
 100% { opacity: 0;transform: translate(0,0);}
}
</style>
</head>

<body>
<div id="news">
<ul class="news-ticker">
<li>【バレンタイン】プレゼントオーダー承っています</li>
<li>【送料無料】10,000円以上お買い上げで送料無料</li>
<li>【お祝い】各種イベント用のオーダー承っています</li>
</ul>
</div>
</body>
</html>

WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

css3を使って文字を動かす（横方向）