Webサイト発注虎の巻ダウンロード
Webサイト発注虎の巻ダウンロード
#213
それいけ!フロントエンド

CSSだけでアニメーション実装 〜カード型リンクHover編〜

ぜんちゃん

こんにちは。フロントエンドエンジニアのぜんちゃんです。

CSSアニメーションの勉強第1弾では、ローディングアニメーションを実装しました。

今回は、カード型の要素にマウスカーソルをあてたときのHoverアニメーションを2つ実装してみたいと思います!

カード型リンク~上から下へ~

まずはこちらのカード型リンクのHoverアニメーションを作っていきます。

Hoverしたときに、

  • ピンク背景のブロックを上から重ねる
  • 「READ MORE」というテキストをFadeInする

以上の2つの動きを実装しています。

ピンク背景のブロックを上から重ねる

ピンクの背景をtransformを使って位置移動をしており、初期位置を、すべてカードの外に出るように指定しています。

カードの外に出ていても、カード要素に overflow: hidden; を指定しておくことによって、要素外の部分は隠れています。

「READ MORE」というテキストをFadeInする

READ MOREのテキストは、通常時に opacity: 0; を指定して透明にし、Hoverした際に opacity: 1; にアニメーションをしています。

カード型リンク~左から右へ~

次にカード型リンクのHoverアニメーションを作っていきます。

Hoverしたときに、

  • オレンジの線を左から右に表示
  • 「READ MORE」というテキストをFadeInする
  • 黒背景をFadeInする

以上の3つの動きを実装しています。

オレンジの線を左から右に表示

まず、左から表示するオレンジの線を作ります。

そして親要素に

position: relative;
overflow: hidden;

を指定し、オレンジブロックに

transform: translateX(-100%);

を指定してカード型ブロックから外側に表示しておきます。

Hover時に

transform: translateX(0);

を指定しておき、左から表示するようにします。

「READ MORE」というテキスト、黒背景FadeInする

こちらは1つ目と同様に、opacity:0; → opacity:1; にすることでFadeInをします。

まとめ

やはり、Hoverアニメーションで動きがあると、思わずクリックしたくなります……!! UIの観点でもとても良いですね。

今回は2つカード型のHoverアニメーションを実装してみました。こちらの方法はボタンのHoverなどにも活用できます!

それではまた、ぜんちゃんでした!