webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

css3 animation 文字のアニメーション

  • 文字のアニメーション

  • カウンターのように文字を入れ替える。
  • <li>で表示させたい文章を縦に並べる。
  • 窓を作って、overflow-hidden
  • 説明はめんどくさい。カルーセルウィンドウの縦バージョン。
  • ポイントは、<li>の高さ、line-height、窓(#news)の高さを揃えること。
  • animation name→アニメーションの名前、ID
  • animation duration→アニメーションの尺(長さ)
  • これら2つは必ず設定しないといけない必須事項。
  • プロパティーには2つの「時間」がある。
  • ひとつはduration(尺)と、delay(ファイルが読み込まれてから再生するまでの時間)
  • ひとつしか記述がなければそれは、duration を表す。2つ記述があれば先頭が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>