文字をスーッと出したい。キーフレームアニメーションでやってみる。
前回の続き(笑)
文字をスーーーッと出したい。
文字をスーッと出したい。これはCSSのキーフレームアニメーション使うパターン。
↑見逃した人は、ブラウザの再読み込みをしてみてください。
文字の上に、カバー用のdivを乗せてそれを動かしている。背景と同じ色だとわからないので、色を付けてみるよ。
文字をスーーーッと出したい。
参考にコードを掲載しておくね。
まずはHTML。
.moji-kakomi の中に
p（文字）
.cover（白いカバー）を重ねて配置します。
見た目では、最初に白いカバーが上にあり、動いて消えることで文字が出てくる、という演出になります。
▼HTML
<div class="moji-kakomi">
<p>文字をスーーーッと出したい。<p>
<div class="cover"></div>
</div>▼文字全体を囲む親ボックス（ クラス moji-kakomi ）に対してのCSS
.moji-kakomi {
position: relative; /* ポジション使うために親とする */
overflow: hidden; /* はみ出した要素は見えなくする */
}▼文字部分（クラス moji-kakomi の中の p ）に対してのCSS
.moji-kakomi p {
font-size: 3rem; /* 文字サイズ */
color: #000; /* 文字色 */
margin: 0; /* 要素外余白：０； */
opacity: 0; /* 透明 ← 後でフェードインさせるために最初は透明 */
transform: translateY(20px); /* Y軸（縦方向）に20ピクセル動かす ← 後で元の位置に */
animation-name: fadeUp; /* 適用させるアニメの名前 */
animation-duration: 1.5s; /* アニメの所要時間 */
animation-timing-function: ease-out; /* アニメの変化の仕方 */
animation-fill-mode: forwards; /* アニメが終わった後もその状態を保つ */
}▼カバー部分（クラス cover ）に対してのCSS
.cover {
position: absolute; /* 親要素の中で絶対配置 */
top: 0; /* 上からの位置 */
left: 0; /* 左からの位置 */
width: 100%; /* 横幅 h2をぴったり覆う横幅 */
height: 100%; /* 高さ h2をぴったり覆う高さ */
background-color: #fff; /* 背景色 白い長方形になる */
animation-name: coverSlide; /* 適用させるアニメの名前 */
animation-duration: 1.5s; /* アニメの所要時間 */
animation-timing-function: ease-out; /* アニメの変化の仕方 */
animation-fill-mode: forwards; /* アニメが終わった後もその状態を保つ */
animation-delay: 0.3s; /* アニメ開始までの待機時間 0.3秒だけ遅れて動き出す */
}
▼アニメ「fadeUp」h2 のフェードインとスライドアップ CSS ふわっと上に浮かびながら出てくる演出
@keyframes fadeUp {
to {
opacity: 1; /* 透明 0 から 1 完全に見える */
transform: translateY(0); /* 20px下の位置 から 元の位置 */
}
}▼アニメ「coverSlide」カバーがスライドする動き CSS 白い板がスーッと右に抜けて、h2が現れる演出
@keyframes coverSlide {
0% {
transform: translateX(0); /* 最初は左端（全体を覆っている）*/
}
100% {
transform: translateX(100%); /* 右にスライドして画面外へ出る */
}
}
