CSS3 のみでMaterial Designライクなripple effect を試してみた
先日、Material Design Lite がリリースされました。 Material Design の中にripple effect という、ボタンをクリックすると波紋が拡がる効果があります。 こちら http://www.getmdl.io/components/index.html#buttons-section で試せます。
マウス位置取得して、その位置から波紋が拡がるようなのでJavaScript(JS) を使っているようですが、 今回は、CSS3 only で実現できないか試してみました。
サンプル
今回検索してみたところ, Pure Ripple CSS として、すでに作成していた方がいらっしゃったので、こちらを
mladenplavsic.github.io 参考にして作ってみました。
サンプルは、ボタンをクリックするとボタンの中心から波紋（ボタンの大きさ基準）が拡がるripple effect になっています。
コード解説
肝になるCSS のコードは以下です。
.ripple:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200%;
height: 200%;
border-radius: 50%;
opacity: 0;
background-color: rgba(250,250,250, 0.7);
transition: opacity 1s, width 1s, height 1s;
}
.ripple:active:after {
content: "";
width: 0;
height: 0;
opacity: 1;
transition: opacity 0s, width 0s, height 0s;
}
肝は、transition を2回呼んでいるところです。 通常、以下のようにtransition と active を組み合わせて、
X {
transition: all 1s;
}
X:active{
ZZ: WWW;
}
X → X:active の状態へ遷移すると、 クリックが終わった(mouseup)瞬間に、transition のアニメーションがキャンセルされてしまいます。
今回は、その問題を解決するために、transition を2回呼んでいます。 ボタンをクリックすると、active になり、 .ripple:active:afterが有効になります。 その中のtransitionは0s なので、activeになった瞬間、.ripple:active:after の状態 （今回は、width:0; height: 0; opacity: 1;）になります。
クリックが終わると、active から抜けるので、.ripple:afterが有効になります。 次は、.ripple:after内のtransition が有効になり、 .ripple:active:after の状態から.ripple:after の状態へのアニメーションが行われます。
アニメーションの内容は、.repple:after がボタン中心に置かれ、 width: 0; height: 0; opacity: 1; → width: 200%; height: 200%; opacity: 0; と遷移する楕円（円）（色は、background-color: rgba(250,250,250, 0.7);）となっています。
