【STUDIO】ノーコードツールで下からフェードイン

STUDIOに登録して、触ってみました

気になっていたけど使ったことがなかったノーコードツール。
今回はSTUDIOに登録して触ってみました。
UIがわかりやすくて、基本的な設定は何も調べなくてもサクサク作れました。
フォントや色、サイズや空白など、特に困ることなく実装できそう。

下からフェードインのやり方

アニメーションの設定、少しだけやり方に迷ったのでメモ。
右上に条件付きスタイルというボタンがあるのでそこにカーソルを合わせる。グレーアウトされてたから最初に探した時に見落としてしまってました。。カーソルを合わせると、アニメーション　出現時というボタンがでてきます。

モーションで出現時のアニメーションを設定します。

下からフェードインしたいので、出現時を
不透明度・・・opacity: 0;
時間・・・animation-duration: 1000ms;
遅延・・・animation-delay：　300ms;
Y軸・・・transform: translateY(30px)
で設定。

設定後に右上のライブプレビューを押すとプレビューURLがでてくるので確認してみると下からフェードインできていました！

まとめ

ノーコードツール、下からフェードインは簡単にできました！
色々な実装ができるようですが、できないこともあるみたいなので、
何ができて何ができないのか、いろいろ試して記録していけたらと思います。