【超簡単】CSSのアニメーションで点滅させる

CSSのアニメーションを使って画面に表示されているものを点滅させたいときありますよね。

ステータス表示とかで下記のように処理中は点滅してたほうがわかりやすかったりします。

ということでコピペで使えるCSSをご紹介します。

HTML

＜div class="blinking">処理中＜/div>

classにblinkingが付与されている間は点滅するアニメーションが動き続けます。

透過率が１秒間隔で0.5～1.0の間を変化するアニメーションです。

CSS

/* 点滅用CSS Start */
.blinking {
    -webkit-animation:blink 1.0s ease-in-out infinite alternate;
    -moz-animation:blink 1.0s ease-in-out infinite alternate;
    animation:blink 1.0s ease-in-out infinite alternate;
}
@-webkit-keyframes blink {
    0% {opacity: 0.5;}
    100% {opacity: 1;}
}
@-moz-keyframes blink {
    0% {opacity: 0.5;}
    100% {opacity: 1;}
}
@keyframes blink {
    0% {opacity: 0.5;}
    100% {opacity: 1;}
}
/* 点滅用CSS End */

CSS最小化

/* 点滅用CSS Start */
.blinking {-webkit-animation:blink 1.0s ease-in-out infinite alternate;-moz-animation:blink 1.0s ease-in-out infinite alternate;animation:blink 1.0s ease-in-out infinite alternate;}
@-webkit-keyframes blink {0% {opacity: 0.5;}100% {opacity: 1;}}
@-moz-keyframes blink {0% {opacity: 0.5;}100% {opacity: 1;}}
@keyframes blink {0% {opacity: 0.5;}100% {opacity: 1;}}
/* 点滅用CSS End */