[CSS]フラットなデザインに使いたい！タップ時の新しいエフェクト「波紋」のアニメーションを実装するテクニック

Googleが先日発表したAndroid Lで使われる新しいUX「Material Design」で採用されているようなタップすると波紋のように円が広がるエフェクトを実装するテクニックを紹介します。

タップやクリックでよく見かけるのは、押した感じにへこむエフェクトでしたが、この波紋はフラットにあっててなかなかいいエフェクトですね。

上記はデモをアニメーションgifにしたもので、実際の動作は下記ページで確認できます。

Android L Button

コード紹介の前に「Material Design」とは何？という人は、1分にまとめた動画が公開されているので、こちらでその新しいUXをお楽しみください。
波紋のように円が広がるエフェクトは随所に使用されています。

Material Design

波紋状のエフェクトのコードは、下記のようになります。

HTML

div要素で矩形のボタンを作成します。ラベルはスタイルシートのcontent属性で配置しています。

<div id="button" class="android-btn"></div>
<div id="button2" class="android-btn ink"></div>

CSS

エフェクトのアニメーション、ボタンのサイズや波紋の大きさは、スタイルシートで調整します。

.android-btn {
  display: inline-block;
  font-family: "Roboto";
  font-weight: 300;
  font-size: 0.9vw;
  background: #5677FC;
  color: #fff;
  height: 36px;
  text-align: center;
  line-height: 36px;
  text-transform: uppercase;
  padding: 0 60px;
  border-radius: 1px;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;;
}

.android-btn.active {
  background: #455EDE;
}

.android-btn:after {
  content: "Button";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.active:before {
  content: "";
  position: absolute;
  top: -32px; /* (button height - height) / 2 */
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  background-color: #3B50CE;
  border-radius: 100%;  
  
  -webkit-animation: scaleout 0.3s 1 ease-out;
  animation: scaleout 0.3s 1 ease-out;
  
  opacity: 0;
}

.ink {
  background: none;
  color: #1a1a1a;
}

.ink.active {
  background: #E0E0E0;
}

.ink.active:before {
  background: #BDBDBD;
}

/* Anmiation from http://tobiasahlin.com/spinkit/ */

@-webkit-keyframes scaleout {
  0% { 
    opacity: 1;
    -webkit-transform: scale(0.0) 
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes scaleout {
  0% { 
    opacity: 1;
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 100% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

JavaScript

スマフォなど疑似クラスの「:active」が機能しない環境用に、スクリプトで各ボタンのクリック時に「.active」を加えます。

<script>
var button = document.getElementById('button'),
    button2 = document.getElementById('button2');

button.addEventListener('click', function () {
  this.setAttribute('class', 'android-btn active');
  
  var self = this;
  setTimeout(function () {
    self.removeAttribute('class', 'active');
    self.setAttribute('class', 'android-btn');
  }, 300)
});

button2.addEventListener('click', function () {
  this.setAttribute('class', 'android-btn ink active');
  
  var self = this;
  setTimeout(function () {
    self.removeAttribute('class', 'active');
    self.setAttribute('class', 'android-btn ink');
  }, 300)
});
</script>
</body>