マウスオーバーエフェクト

画像ボタンもふわっする

画像ボタンやバナーの場合は、img要素を包むa要素の背景画像に、マウスオーバー時の画像を指定して、img要素のopacityを徐々に変化させれば、ふわっと切り替わったように見えます:)。

.bnr {
	background: url(hov.png) center / cover no-repeat;
}
.bnr img {
	transition: opacity .3s;
}
.bnr:hover img {
	opacity: 0;
}

ふわっとカチッする

CSSで作ったボタンなら、backgroundやbox-shadowなど、いじれるプロパティがいっぱいあるので、ふわっとさせ甲斐がありますねー！まとめてtransitionを指定すれば、より魅力的なアニメーションが表現できます。

.btn {
	︙
	color: ghostwhite;
	background: #86c0de;
	box-shadow: 0 6px 0 hsl(200deg 37% 50%), 0 12px 0 rgba(0,0,0,.2);
	transition: color .3s, background .3s, box-shadow .3s, transform .3s;
}

上の例では、ボタンの地色（background）、文字色（color）、ボタン側面の色と影の色（box-shadow）、ボタンの位置（transform）の4つのプロパティを、徐々に変化させています。

.btn:hover {
	color: white;
	background: hsl(200deg 62% 75%);
	box-shadow: 0 3px 0 hsl(200deg 47% 60%), 0 6px 0 rgba(0,0,0,.2);
	transform: translateY(3px);
}

また、カーソルを乗せた時にはゆったり動いてますが、ボタンを押下した時にはちょっと早めに動くようにしてます。

.btn:active {
	︙
	transition-duration: .1s;
}

.btnに指定したtransitionの値を、:activeの時にはdurationの値だけ.1sに上書きしてるんですねー。これで、ボタンを押下した時だけは0.1秒で変化して、それ以外の時には0.3秒で変化するようになります。

クリックした時もぽよんっする

こうなると、カーソルを押下した時にもぽよんっをつけたくなりますね！
@keyframes規則でpushというキーフレームを定義して、以下のように指定してみました。

.btn:active {
	︙
	animation: push .6s;
}
@keyframes push {
	from, to { transform: none; }
	10% { transform: scale(.8); }
	40% { transform: scale(1.1); }
	60% { transform: scale(.96); }
	80% { transform: scale(1.02); }
}

柔らかそうXD！
けど、ぽよんっの最中でカーソルを外すと、ピクッピクッてなんだか気持ち悪いですね…⁑O。

ぽよんっを止めない

アニメーションが終わるまでアニメーションを始めないようにするのは、CSSだけでは難しくて、JavaScriptを使って制御しないといけません。
ここでは、以下のようなJavaScriptを用意しました。

document.addEventListener('DOMContentLoaded', () => {
	const btn = document.querySelector('.btn');
	btn.addEventListener('mouseenter', e => {
		e.target.classList.add('is-poyo');
	});
	btn.addEventListener('mouseup', e => {
		e.target.classList.add('is-poyo');
	});
	btn.addEventListener('animationend', e => {
		e.target.classList.remove('is-poyo');
	});
});

3〜5行めで、ボタンにカーソルが乗った時（mouseenter）に、is-poyoというclassを付ける、ということをしています。それから、6〜8行めで、カーソルを押下し終わった時（mouseup）にも、is-poyoというclassを付けています。
そして、9〜11行めで、アニメーションが終わった時（animationend）に、is-poyoというclassを外す、ということをしています。

CSSで、:hoverに適用していたアニメーションの指定を、このis-poyoというclassが付いた時に適用されるように、指定し直します。

.btn.is-poyo {
	animation: poyo .6s;
}

アニメーションの途中でカーソルを外しても、ピクッピクッとしなくなりましたね;D！

下から出る詳細

詳しい情報は画像の下に隠しておいて、カーソルが乗ったら下からスッとスライドする仕組み。

まずはli要素にposition: relativeを指定。これで、li要素が、その子要素を絶対配置するときの基準になります。dl要素にposition: absoluteを指定しinset: 0とすれば、figure要素の上に重なった状態で配置されます。

li {
	position: relative;
}
dl {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 16px 24px;
	border-radius: 8px;
	color: white;
	background: rgba(220,102,136,.9);
}

dl要素の上下のスライドはtransformプロパティのtranslateで移動させています。
最初の状態では、dl要素にtranslateY(100%)と指定。これで、その要素の高さ分、下方向に移動します。カーソルが乗ったときはnoneとして、元の位置に戻します。

.type1 {
	overflow: hidden;
}
.type1 dl {
	opacity: 0;
	transform: translateY(100%);
	transition: opacity .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.type1:hover dl {
	opacity: 1;
	transform: none;
}

けど、カーソルに乗った時の指定って、opacityプロパティもtransformプロパティも初期値に戻すだけなので、なんだか冗長です…。こんな時は、:not()（否定擬似クラス）を使うとよいです。通常状態とカーソルが乗った時の両方を指定するのでなくて、カーソルが乗っていない時だけ指定するってわけですね;)！

.type1 dl {
	transition: opacity .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.type1:not(:hover) dl {
	opacity: 0;
	transform: translateY(100%);
}

くるんと裏返る

まるで一枚のカードみたく、写真の裏面に詳細情報が載ってるような表現です。

上述と同じように、position: absoluteでfigure要素とdl要素を重ねて配置。
最初の状態では、dl要素は裏返ってる状態なので、rotateX()を使ってX軸を中心に上下に回転させておき、カーソルが乗った時に、figure要素とdl要素を同時に+180°回転させてます。

.type2 dl {
	background: #cd5c5c;
	transform: rotateX(-180deg);
}
.type2:hover img {
	transform: rotateX(180deg);
}
.type2:hover dl {
	transform: none;
}

カーソルが乗った時に<img>と<dl>を、同じタイミングで回転させる事で、一枚のカードのように見せてるんですねー。

裏返る演出で大事なのがbackface-visibilityというプロパティ。このプロパティにhiddenと指定した要素は、裏返った時に不可視状態になります。

.type2 .image,
.type2 .text {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

backface-visibilityで裏側だと判断されるのは、transformプロパティのrotateX()かrotateY()で、90°以上回転した時。下のサンプルは、左が「表面の要素のみ」真ん中が「裏面の要素のみ」になってます。表面が裏返ると不可視状態になり、その瞬間に裏面が可視状態になってるのがよくわかりますねー。

この指定がないと下のサンプルのように、裏側も丸見え、というか、裏面が表面の上に乗っちゃってます。

backface-visibilityについて詳しくは下記サイトを参照のこと。
backface-visibility - CSS: カスケーディングスタイルシート | MDN

あと、回転する要素の親要素には、perspectiveプロパティを指定してます。

.type2 {
	perspective: 1000px;
}

perspectiveは、遠近感を指定することができるプロパティ。指定する値は、その要素を見ている視点の位置を表してて、ここでは、1000px離れた所で見てる感じになります。

つまり、この値が小さい（近い）ほど遠近感が強く、大きい（遠い）ほど遠近感が緩くなるってことですね:)。
この指定がないと、下のサンプルみたく、立体感がなくなって、裏返ったのか縦に縮んだのかわからなくなっちゃいます…。

perspectiveについては下記記事が詳しいです。
HTML5 × CSS3 × jQueryを真面目に勉強 – #10.1 CSS3 Transforms(3D) ｜ Developers.IO（2012.12.27）

左右から背景が出てくる

パネル状の背景が左右から入ってきて、カーテンを閉めるように中央でピッタリ閉じられると、詳細情報がフェードインしてきます。

左右から出てくる背景は、::before疑似要素と::after疑似要素で表示させています。疑似要素を使うと、指定した要素の中に、擬似的に別の要素を追加します。
どのように追加するかというと、擬似要素を付けたセレクタの中で、contentプロパティを使って、以下のように書きます。

p::before {
	content: "::beforeの疑似ですよ";
}
p::after {
	content: "::afterの疑似ですよ";
}

HTMLには / とだけ書かれたp要素がひとつ、なのにPREVIEWを見るとテキストが表示されてますね！
こんな感じで、疑似要素とcontentプロパティを使えば、HTMLで書かれた要素とは別に、CSSで新たに要素を作れちゃうんです（擬似的に！）:D。
::beforeは、指定した要素の開始タグの直後に、::afterは、指定した要素の閉じタグの直前に、要素を追加します。※Chromeで「検証」をしてみても存在を確認できますよ;)。

左右から出てくる背景は、dl要素内に、::beforeと::afterで2つの要素を追加してたわけです（擬似的に！:D）。