分からない人はとりあえず一行で!CSS一行でふわっとさせるふわっとさせたい要素に下記の一行のcssを書けば、簡単にふわっとアニメーションを実現できます。.3s;実際にお見せしましょう。通常はhoverしてもカチッと切り替わる感じですよね。CodePen.こんな感じに。CodePen.あっという間にちょっとリッチなアニメーションが実装できてしまいますね!もうこれで満足という方はページを閉じていただいて結構ですが(笑)、仕組みを知りたい方は以下で説明いたします。なんでふわっとなるの?transitionプロパティは形や色、位置等の変化に関する設定がおこなえるプロパティ。変化の始まるタイミングの4つ。今回紹介した一行は、この中のtransition-durationを設定しているわけですが、これは変化にかかる時間を設定できるものなんですよね。ならないボタンは、0秒で色の変化をさせているので、いきなりカチッと切り替わるんですよね。逆に、ふわっとなるボタンの方は、0.3秒かけて色を変化させているので、ふわっ......となります。(僕の肌感では、0.2〜0.3秒くらいがいい感じのふわっと感です。笑)という具合に、最低限transition-durationを設定するだけでリッチになるんですよね〜。細かく設定したい人はアニメーションを細かく設定したい人は他のものも設定するのが良い思います。その場合は、transitionプロパティでまとめて設定しちゃうとすごい楽。.5s;となりますね。.3s;}と書いておけば、すべての要素の動きにふわっと感が追加されてリッチになります。【超初心者向け】Webサイト制作は家を建てるイメージで覚えよう!【小学生でも分かる!】5分でjQueryが書けるようになる方法プロフィールナナシロマルチクリエイターのナナシロです。※くわしい自己紹介についてはこちら。・好きを仕事にしたい人へ向けて、発信をおこなっています。