- カウンターのように文字を入れ替える。
- <li>で表示させたい文章を縦に並べる。
- 窓を作って、overflow-hidden
- 説明はめんどくさい。カルーセルウィンドウの縦バージョン。
- ポイントは、<li>の高さ、line-height、窓（#news）の高さを揃えること。
- animation name→アニメーションの名前、ID
- animation duration→アニメーションの尺（長さ）
- これら２つは必ず設定しないといけない必須事項。
- プロパティーには２つの「時間」がある。
- ひとつはduration（尺）と、delay（ファイルが読み込まれてから再生するまでの時間）
- ひとつしか記述がなければそれは、duration を表す。２つ記述があれば先頭がduration, 後のほうがdelayを表す。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>文字のアニメーション</title>
<style>
html, body, ul, li{
margin: 0;
padding: 0;
line-height:0;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 50px;
}
ul, li{list-style: none;}
body{ color: #000080;}
body{
background:url(img/woody.jpg) no-repeat center;}
#news{
width: 1000px;
height: 70px;
margin: 650px auto 0;
text-align: center;
overflow: hidden;
}
#news li{
height: 70px;
line-height: 70px;
}
.news-ticker{
animation: ticker 10s infinite;
}
@keyframes ticker{
0% {opacity: 1; transform: translateY(0);}
20% {opacity: 1; transform: translateY(0);}
30% {opacity: 1; transform: translateY(-70px);}
50% {opacity: 1; transform: translateY(-70px);}
60% {opacity: 1; transform: translateY(-140px);}
80%{opacity: 1; transform: translateY(-140px);}
100%{opacity: 1; transform: translateY(0);}
}
</style>
</head><body>
<div id="news">
<ul class="news-ticker">
<li>We are all interested in the future,</li>
<li>for that is where you and I are </li>
<li>going to spend the rest of our lives.</li>
</ul>
</div>
</body>
</html>
