WEBサイト制作の勉強

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

CSS3によるアニメーション-ニュースティッカー

今回はCSS3の「animation」を使い、テキストを動かしてみます。
「animation」を使う際はベンダープレフィックスを使い、主要ブラウザーにしっかり対応させる事が大事です。

http://caniuse.com/などのサイトでブラウザサポート状況を確認すること。


デモ

http://yachin29.html.xdomain.jp/animation/news_ticker.html



news-ticker.html

<!DOCTYPE HTML>
<html>
<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: 800px;
 height: 30px; /*3行あるliを1行だけ表示させるため*/
 overflow: hidden;  /*3行あるliを1行だけ表示させるため*/
 margin: 100px auto 0;
 font-size: 24px;
 text-align: center;
}
#news li {
 height: 24px;  /*3行あるliを1行だけ表示させるため*/
 line-height: 24px;  /*3行あるliを1行だけ表示させるため*/
 padding: 3px;
 color: #FF0;
}
.news-ticker {
  animation: ticker 5s infinite;/*アニメーションプロパティのショートハンド①keyframesに付ける名前②アニメの時間③ループの回数*/
 -webkit-animation: ticker 5s infinite;
}
@-webkit-keyframes ticker {
/* 1行目 */
 0% { opacity:0; -webkit-transform: translateY(0);}
 10% { opacity:1; -webkit-transform: translateY(0);}
 20% { opacity:1; -webkit-transform: translateY(0);}
 33% { opacity:0; -webkit-transform: translateY(0); }
/* 2行目 */
 34% { opacity: 0; -webkit-transform: translateY(-30px);}
 43% { opacity: 1; -webkit-transform: translateY(-30px);}
 53% { opacity: 1; -webkit-transform: translateY(-30px);}
 65% { opacity: 0; -webkit-transform: translateY(-30px);}
/* 3行目 */
 66% { opacity: 0; -webkit-transform: translateY(-60px);}
 76% { opacity: 1; -webkit-transform: translateY(-60px);}
 86% { opacity: 1;-webkit-transform: translateY(-60px);}
 100% { opacity: 0; -webkit-transform: translateY(-60px); }
}

@keyframes ticker {
/* 1行目 */
 0% { opacity:0;transform: translateY(0);}
 10% { opacity:1;transform: translateY(0);}
 20% { opacity:1;transform: translateY(0);}
 33% { opacity:0;transform: translateY(0); }
/* 2行目 */
 34% { opacity: 0;transform: translateY(-30px);}
 43% { opacity: 1;transform: translateY(-30px);}
 53% { opacity: 1;transform: translateY(-30px);}
 65% { opacity: 0;transform: translateY(-30px);}
/* 3行目 */
 66% { opacity: 0;transform: translateY(-60px);}
 76% { opacity: 1;transform: translateY(-60px);}
 86% { opacity: 1;transform: translateY(-60px);}
 100% { opacity: 0;transform: translateY(-60px); }
}

@-moz-keyframes ticker {
/* 1行目 */
 0% { opacity:0; -moz-transform: translateY(0);}
 10% { opacity:1; -moz-transform: translateY(0);}
 20% { opacity:1; -moz-transform: translateY(0);}
 33% { opacity:0; -moz-transform: translateY(0); }
/* 2行目 */
 34% { opacity: 0; -moz-transform: translateY(-30px);}
 43% { opacity: 1; -moz-transform: translateY(-30px);}
 53% { opacity: 1; -moz-transform: translateY(-30px);}
 65% { opacity: 0; -moz-transform: translateY(-30px);}
/* 3行目 */
 66% { opacity: 0; -moz-transform: translateY(-60px);}
 76% { opacity: 1; -moz-transform: translateY(-60px);}
 86% { opacity: 1;-moz-transform: translateY(-60px);}
 100% { opacity: 0; -moz-transform: translateY(-60px); }
}
</style>
</head>

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