本記事では、cssのみ(jqueryなし)でフェードインを実装する方法について解説しています。
デモ
※デモは下からのフェードインです。
コード
以下のfadein-bottomクラスをフェードインさせたい要素に適用してあげるだけでOKです。
※left、right、topを実装する場合は必要に応じてtransformプロパティを調整
style.css
/* アニメーションクラス */
.fadein-bottom {
opacity: 0;
animation-name: fadein-bottom;
/* CSSのanimationプロパティー */
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
@keyframes fadein-bottom {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}<img class="fadein-bottom" src="/cat.jpeg" />コードの説明
1.animation
アニメーションの「速さ・時間・回数」などをコントロールする
制御できる項目は全部で「9つ」あります。
| animation-name | 使うアニメーションの名前を指定 |
|---|---|
| animation-duration | アニメーションの進行度合いを調整（ゆっくり始まって→ゆっくり終わるなど） |
| animation-delay | アニメーションの開始のタイミングを指定 |
| animation-timing-function | :アニメーション進行スピードの調整 |
| animation-iteration-count | 何回アニメーションを繰り返すかを指定 |
| animation-direction | アニメーションの再生方向を指定 |
| animation-fill-mode | アニメーションが始まる前と終わった後の状態を指定 |
| animation-play-state | アニメーションの再生や停止を指定する |
| animation | 上記のプロパティーをまとめて書く場合（ショートハンド） |
2.keyframes
どう言ったアニメーションなのか?という内容を書く(色、大きさ、位置、透明度など)
0%はアニメーション開始時の状態を、100％はアニメーション終了時の状態を設定する
フェードインでは、要素の透明度と位置を変動させているので、以下のプロパティを使用している。
| opacity | 要素の透明度を調整 |
|---|---|
| translate | 要素の上下左右の位置調整 |
以上です。cssのみ(jqueryなし)でフェードインを実装する方法について解説しました。jqueryを使用するよりコード量が少なくて済むので、おすすめです。
コメント