今回のアニメーションでは背景色をアニメーションで変化させ、liで囲まれたテキストを動かし、3つのliを順次表示させる。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style> /*================================================= * ブラウザのデフォルトのスタイルをリセットする * ================================================= */ html, body, ul, ol, li, p { margin: 0; padding: 0; font-size: 100%; } body { line-height: 1.0; } img { border: 0; vertical-align: bottom; } ul, ol { list-style: none; } body { animation: bg-color 10s infinite; -webkit-animation: bg-color 10s infinite; } @-webkit-keyframes bg-color { 0% { background-color: #e74c3c; } 20% { background-color: #f1c40f; } 40% { background-color: #1abc9c; } 60% { background-color: #3498db; } 80% { background-color: #9b59b6; } 100% { background-color: #e74c3c; } } @keyframes bg-color { 0% { background-color: #e74c3c; } 20% { background-color: #f1c40f; } 40% { background-color: #1abc9c; } 60% { background-color: #3498db; } 80% { background-color: #9b59b6; } 100% { background-color: #e74c3c; } } #news { width: 800px; /*liの文字数により、値は可変*/ height: 30px; 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; } .anime-ticker { animation: ticker 5s infinite; -webkit-animation: ticker 5s infinite; /*アニメーションプロパティのショートハンド①keyframesに付けた名前②アニメの時間③ループの回数*/ } @-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); } } </style> </style> </head> <body> <div id="news"> <ul class="anime-ticker"> <li>【母の日】プレゼントオーダー承っています</li> <li>【送料無料】10,000円以上お買い上げで送料無料</li> <li>【お祝い】各種イベント用のオーダー承っています</li> </ul> </div> </body> </html>