【CSS】テキスト、画像を点滅させる-CSS Animation2017/04/17

サイト巡りをしていて点滅させる方法が気になって調べてみました。

「CSSでテキスト、画像、何でも点滅！」で記事にされてましたので、ご紹介します。

はじめに、<blink>については非推奨と主要ブラウザから外された関係で記載していません。

【CSSでの記述】

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

※webkit、moz等はブラウザに対応させるための記述です。

点滅における調整は、1.5sの箇所で点滅時間を調整することができます。

その他詳細は参考サイトをご参照ください。

参考サイト：CSSでテキスト、画像、何でも点滅！(2014/02/13)