【CSS】マウスオーバーした時に浮き上がる表現をする方法｜transition＆transform|hoverした時のホバーアニメーション

CSS要素のホバーアニメーション

「hoverした時にふわっとしたアニメーションをさせたくて…。」そんなことを考えながら、記事の一覧ページで、マウスオーバーした時に、フワッと浮き出るような表現を作りたい…！と思った時に使えるCSSの方法です。

サンプルページはこちら

ふわっ…とは、しない…。

今でもまあ…決して悪くはないのですが、まぁ…ちょっと浮いたような表現にしたい…、みたいな。ことを思ってしまったので、ちょっと試してみたいと思います。

こんな感じでマウスを乗せたときに、ふわっと。

CSSの「transition:」を使うことで、表現できます。

transition は、transition-property、 transition-duration、 transition-timing-function、 transition-delay の一括指定プロパティとなります。

transition は CSS のプロパティで、 transition-property、 transition-duration、 transition-timing-function、 transition-delay の一括指定プロパティです。

CSS トランジションは、 CSS プロパティが変化する際のアニメーションの速度を操作する手段を提供します。プロパティの変更を直ちに有効にするのではなく、プロパティの変更を一定期間にわたって発生させることを可能にします。

transition: 対象のプロパティアニメーションにかかる時間イージング遅延時間;
transition: transition-property transition-duration transition-timing-function transition-delay;

width が0.5秒で変化し、その後（height の遅延時間が0.5秒） height が0.5秒で変化し、続いて（line-height の遅延時間が1秒）line-height が0.2秒で変化します。

transition: width 0.5s ease 0s, height 0.5s ease-in 0.5s, line-height 0.2s linear 1s;

アニメーションさせる対象の CSS プロパティを指定（box-shadow）、アニメーションにかかる時間0.1s、イーズアウトで変化。（クラス名などは適時変更しましょう）

.widget ul li {
transition: box-shadow 0.1s ease-out;
}

続きはこちら▶

【CSS】マウスオーバーした時に浮き上がる表現をする方法｜transition＆transform|hoverした時のホバーアニメーション

Yuuki Eguchi