CSS3によるアニメーション - WEBサイト制作の勉強

今回のアニメーションでは背景色をアニメーションで変化させ、liで囲まれたテキストを動かし、３つの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>