「このボタン、ふわっと動かしたいんだけど、AIにどう伝えればいいんだろう…」そんな経験はありませんか?

そんな時に便利なのが「Animista」というサイトです。CSSアニメーションのプレイグラウンドで、影が落ちるような動きやテキストがバウンドする動きなど、様々なアニメーションが一覧になっていて、それぞれの動きの名前とCSSコードがその場で確認できます。

使い方はとってもシンプル! 気になる動きをクリックしてプレビューを眺め、気に入ったら表示されているコードをそのままコピー。あとはAIのプロンプト欄に「このアニメーションを実装して」と貼り付けるだけで、AIに正確な動きが伝わります。言葉で説明するより、コードをそのまま渡す方が断然早いです!

例えば「shadow-drop-2」というアニメーションは、要素にふわっと影が広がる動きで、名前だけでは想像しづらくても、実際に見るとイメージがすぐつかめます。

イージングや速度を調整しながら好みの動きを探すだけでも、見ているだけで楽しい時間になります。Webサイトに動きをつけたくなったら、まずはAnimistaを覗いてみませんか?

参考サイト: https://animista.net/