animationとは
cssのanimationを使うことで簡単に動きを付けられる。
animationプロパティは、要素にキーフレームアニメーションを適用する場合に、 アニメーションについてまとめて指定する際に使用します。
今回はスプラッシュ画面に文字を「じんわりと」表示させてみた。
webフォント
表示させる文字は、webフォントのNoto JPを利用することにした。
HTMLにwebフォントを読み込むコードを追加。
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+JP" rel="stylesheet">
クラス名を付ける。
.amiens-font-noto {
font-family: 'Noto Serif JP', serif;
}
アニメーション
最初のブロックに、アニメーションを付ける。
HTMLは、
<div id="01" class="amiens-box100 amiens-font-noto amiens-fadein">あなたのネットショップは<br />売れていますか？</div>
ブロックを設定。
.amiens-box100{
box-sizing: border-box;
min-height: 100%;
min-height: 100vh;
color:white;
font-size:1rem;
background-color:black;
padding:40% 30px;
padding:40vh 30px;
text-align: center;
}
これにcssでアニメーションを付けた。
.amiens-fadein{
animation-name: fadein;
animation-duration: 10s;
font-family: 'Noto Serif JP', serif !important;
}
@keyframes fadein {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
ちょっと手抜きかも。
