CSS3で波紋(多重の円が広がり消える)アニメーション #CSS

業務で使ったのでメモ。
「電波飛んでます」
「通信中です」
みたいな表現などで使えるかもです。

border-radiusで円を描いてます。

hoge

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>波紋</title>
</head>
<body>

    <div>
        <div class="signal1"></div>
        <div class="signal2"></div>
        <div class="signal3"></div>
    </div>


    <style type="text/css">

    /* signal */
    .signal1 {
      z-index: 9999;
      border: 2px solid #2998ce;
      border-radius: 150px;
      width: 150px;
      height: 150px;
      margin: -15px 0 0 -15px;
      opacity: 0;
      position: absolute;
      top: -50px;
      left: -50px;
      animation: pulsate 1.5s ease-out;
      animation-iteration-count: infinite;
      -webkit-animation: pulsate 1.5s ease-out;
      -webkit-animation-iteration-count: infinite;
      -webkit-transform: translate(-50%, -50%);
    }

    .signal2 {
      z-index: 9999;
      border: 2px solid #2998ce;
      border-radius: 100px;
      width: 100px;
      height: 100px;
      margin: -15px 0 0 -15px;
      opacity: 0;
      position: absolute;
      top: -25px;
      left: -25px;
      animation: pulsate 1.5s ease-out;
      animation-iteration-count: infinite;
      -webkit-animation: pulsate 1.5s ease-out;
      -webkit-animation-iteration-count: infinite;
      -webkit-transform: translate(-50%, -50%);
    }

    .signal3 {
      z-index: 9999;
      border: 2px solid #2998ce;
      border-radius: 50px;
      width: 50px;
      height: 50px;
      margin: -15px 0 0 -15px;
      opacity: 0;
      position: absolute;
      top: 0px;
      left: 0px;
      animation: pulsate 1.5s ease-out;
      animation-iteration-count: infinite;
      -webkit-animation: pulsate 1.5s ease-out;
      -webkit-animation-iteration-count: infinite;
      -webkit-transform: translate(-50%, -50%);
    }

    @keyframes pulsate {
      0% {
        transform: scale(0.1);
        opacity: 0.0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: scale(0.7);
        opacity: 0;
      }
    }

    @-webkit-keyframes pulsate {
      0% {
        -webkit-transform: scale(0.1);
        opacity: 0.0;
      }
      50% {
        opacity: 1;
      }
      100% {
        -webkit-transform: scale(0.7);
        opacity: 0;
      }
    }


/* 調整方法 */

/*
円のサイズ  
width,height,border-radiusの値を変更

アニメーションの時間
animation: pulsate 1.5s ease-out;
-webkit-animation: pulsate 1.5s ease-out;
の1.5sの秒数変更

円の拡大率
transform: scale(0.7);
-webkit-transform: scale(0.7);
のスケールの値
*/
</style>

</body>
</html>

このDEMOだとアニメーションはずっと繰り返されます。

「水面のように、クリック時に一度、波紋を出したい」などは
こちらが参考になるかもです。
http://qiita.com/nekoneko-wanwan/items/c9f26ce049bd422e555c

アニメーションを途中で止める方法はこちらが参考になりました。
http://kimizuka.hatenablog.com/entry/2014/12/02/000000