CSSで円の外側へ向かってボーダーを徐々に表示して消す

最近CSSのアニメーションが気になり始めてきたので、円の外のボーダーを徐々に表示して消すというものを作ってみました。

ソースコード
1. html
2. css
サンプル
まとめ

ソースコード

html

ブロック要素をひとつ作っておきます。

<div class="ripple"></div>

css

円を「ripple」で表示し、「::before」疑似要素で同じ大きさのボーダーを作り、animationで動きを決めています。keyframesで最初を非表示にして、opacityで%が高まるごとに徐々に表示していき、最後はまた非表示にするということを繰り返しています。transformのscaleで円ボーダーの広がりを指定しています。

.ripple {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    background: #FF0000;
    border-radius: 50%;
}

.ripple::before {
    position: absolute;
    content: "";
    display: block;
    top: -1px;
    left: -1px;
    width: 100px;
    height: 100px;
    border: 1px solid #FF0000;
    border-radius: 50%;
    animation: ripple 2.5s ease-out infinite;
}

@keyframes ripple {
    0% {
        opacity: 0;
        transform: scale(1,1);
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.5;
    }
    75% {
        opacity: 0.75;
    }
    100% {
        opacity: 0;
        transform: scale(1.2,1.2);
    }
}

サンプル

円の外に向かってx軸、y軸にかけて1.2のスケールで広がっています。

サンプル

まとめ

ブロック要素をひとつ作っておく。
円を表示し、疑似要素で同じ大きさのボーダーを作る。
animationで動きを決める。
keyframesのopacityで%で徐々に表示していき、最後はまた非表示にする。
transformのscaleで円ボーダーの広がりを指定。

ゲームでよくある地図の危険区域を表示するようなスタイルに使えそうです。お知らせの一覧で、より気づいて欲しい場合のアイコン用にも応用がききそうです。CSSのアニメーションはプロパティの動きを知っていれば、比較的容易にできます。アイデア次第だと思うので、プロパティの値の意味などをもっと知りたいと思いました。