はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

CSS3 のみでMaterial Designライクなripple effect を試してみた

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 になっています。

codepen.io

コード解説

肝になる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回呼んでいるところです。 通常、以下のようにtransitionactive を組み合わせて、

          

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);)となっています。