ボタンやテキストなどの要素をアニメーションで点滅表示する方法

あるボタンを強調して表示したいことがあったので、CSSのアニメーションを使って点滅表示させてみました。

HTML

<button class="highlight">点滅</button>

CSS

button.highlight{
    animation: flashing 1.0s ease-out;
    animation-iteration-count: infinite;    /* 繰り返し回数 または infinite */
}

@keyframes flashing {
    0%   { opacity: 0.5; }
    50%  { opacity: 1;}
    100% { opacity: 0.5; }
}

アニメーションの遷移時間や@keyframesで設定しているopacity値を変更することで、点滅の速さや強調の度合いを調整することができます。

簡単ですね。

点滅