CSSによるカードレイアウトのマウスオーバー（ホバー）のアニメーション

カードレイアウトのマウスオーバー（ホバー）のアニメーションをCSSで実装する方法をご紹介します。

基本HTML・CSS
背景色
枠線
発光
1. 光彩
2. 輝く
影
1. 拡張
2. 縮小
3. 重なり
重力
凹凸
1. 陥没
2. 隆起
大きさ
1. 拡大
2. 縮小
傾き
回転
1. 水平
2. 垂直
3. 斜め
振動・揺れ
画像の大きさ
画像の色調

基本的なHTMLとCSSを次の通りとします。

HTML

CSS

背景色

フェード

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

スライド

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

スライドフェード

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

枠線

フェード

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

太さ

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

2点ワイプイン

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

4点ワイプイン

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

4点中央ワイプイン

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

.card-box .card {
											position:relative;
										}

.card-box .card::before,
											.card-box .card::after {
												position:absolute;
												display:block;
												box-sizing:border-box;
												content:"";
												opacity:0;
											}

.card-box .card::before {
												top:0;
												left:50%;
												width:0;
												height:100%;
												border-top:5px solid #0091ff;
												border-bottom:5px solid #0091ff;
												transition:left 0.3s, width 0.3s, opacity 0.3s;
											}

.card-box .card::after {
												left:0;
												top:50%;
												width:100%;
												height:0;
												border-left:5px solid #0091ff;
												border-right:5px solid #0091ff;
												transition:top 0.3s, height 0.3s, opacity 0.3s;
											}

.card-box .card:hover::before {
												left:0;
												width:100%;
												opacity:1;
											}

.card-box .card:hover::after {
												top:0;
												height:100%;
												opacity:1;
											}

スケールイン

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

2辺移動

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

.card-box .card {
											position:relative;
										}

.card-box .card::before {
												position:absolute;
												top:0;
												left:0;
												width:100%;
												height:100%;
												content:"";
												background:
													linear-gradient(to right, #0091ff, #0091ff 33.33%, transparent 33.33%, transparent 66.66%, #0091ff 66.66%, #0091ff) 100% 0 / 300% 5px no-repeat,
													linear-gradient(to bottom, transparent, transparent 33.33%, #0091ff 33.33%, #0091ff 66.66%, transparent 66.66%, transparent) 100% 100% / 5px 300% no-repeat,
													linear-gradient(to right, #0091ff, #0091ff 33.33%, transparent 33.33%, transparent 66.66%, #0091ff 66.66%, #0091ff) 0 100% / 300% 5px no-repeat,
													linear-gradient(to bottom, transparent, transparent 33.33%, #0091ff 33.33%, #0091ff 66.66%, transparent 66.66%, transparent) 0 0 / 5px 300% no-repeat;
												opacity:0;
												animation:move 1s linear infinite;
												transition:opacity 0.3s;
											}

.card-box .card:hover::before {
												opacity:1;
											}

@keyframes move {
												0%   { background-position:100% 0, 100% 100%, 0 100%, 0 0; }
												100% { background-position:0 0, 100% 0, 100% 100%, 0 100%; }
											}

4点移動

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

.card-box .card {
											position:relative;
										}

.card-box .card::before {
												position:absolute;
												top:0;
												left:0;
												width:100%;
												height:100%;
												content:"";
												background:
													linear-gradient(to right, #0091ff, #0091ff 50%, transparent 50%, transparent) 100% 0 / 200% 5px no-repeat,
													linear-gradient(to bottom, #0091ff, #0091ff 50%, transparent 50%, transparent) 100% 100% / 5px 200% no-repeat,
													linear-gradient(to left, transparent, transparent 50%, #0091ff 50%, #0091ff) -100% 100% / 200% 5px no-repeat,
													linear-gradient(to top, transparent, transparent 50%, #0091ff 50%, #0091ff) 0 -100% / 5px 200% no-repeat;
												opacity:0;
												animation:move 1s linear infinite;
												transition:opacity 0.3s;
											}

.card-box .card:hover::before {
												opacity:1;
											}

@keyframes move {
												0%   { background-position:100% 0, 100% 100%, -100% 100%, 0 -100%; }
												100% { background-position:-100% 0, 100% -100%, 100% 100%, 0 100%; }
											}

発光

光彩

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

輝く

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

影

拡張

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

縮小

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

重なり

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

重力

浮く

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

降りる

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

跳ねる

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

凹凸

陥没

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

隆起

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

大きさ

拡大

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

縮小

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

傾き

起きる

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

倒れる

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

どける

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

回転

水平

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

垂直

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

斜め

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

振動・揺れ

横に振る

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

縦に振る

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

回して振る

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

画像の大きさ

拡大

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

縮小

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

拡大+回転

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

縮小+回転

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

画像の色調

グレースケールからカラー

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

カラーからグレースケール

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

ぼかし

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する

オーバーレイ

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

ソースを表示する