BiNDismにふわっと表示するCSSを入れてみました

動きが苦手なBiNDで作るサイトに、わずか数行のCSSでふわっと表示させる効果を加えてみました。
j-Queryを使った方法が一般的というか、ふわっと表示させるタイミングなども指定できていいのですが、BiNDで試したらスマホ表示でのメニュー（いわゆる、ハンバーガーメニュー）が機能しなくなってしまいました。j-Queryを使うと干渉しあうというか、スライドショーが動かなくなったり、ヘッダーの固定が無効になったり、どこかにしわ寄せが来ることが多く、BiNDでj-Queryを使う難しさを色々と経験しています。（笑）

そこで、効果としては単純で、ページを開くときにふわっと表示させるだけですが、BiNDismのサイトにCSSだけで実装できる表現をつけてみました。CSS詳細設定に下のソースを書くだけです。

<style type=”text/css”>
<!–
body {
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
–>
</style>

下のサイトを参考にして、バインドで試して見ました。
https://q-az.net/fadein-open-only-css/

BiNDで作るホームページ制作　バインドイズム – BiNDism
https://bindism.com