今回は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>
