CSSでフワッとアニメーション
2022-02-13
ページ読み込み時にフワッとロードする方法
数行のCSSで達成することができる
<body>
<div id="header1">
<h1>Header 1</h1>
<p>Some text</p>
</div>
<div id="header2">
<h1>Header 2</h1>
<p>Some text</p>
</div>
<div id="header3">
<h1>Header 3</h1>
<p>Some text</p>
</div>
</body>こういうHTMLがあるとします。
@keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
#header1{
animation: fadeIn .3s ease-in 0s 1 normal;
}
#header2 {
animation: fadeIn .9s ease-in 0s 1 normal;
}
#header3 {
animation: fadeIn 1.5s ease-in 0s 1 normal;
}Divごとにアニメーションの速度を設定します。 全体をフワッとさせたければBodyに追加すればOKです。
keyframeで動きの変化を指定
@keyframeとはアットルールの一種でCSSの動作を規定するものです。
上述のCSSの0%と100%をそれぞれfromとtoに変換することもできます。FadeInはアニメーショの定義名です。
animation
animation: fadeIn .3s ease-in 0s 1 normal;
↓
animation: 定義名 変化時間 進行具合 ループ 交互に反対再生させるか;
参照
