CSSでテキスト、画像、何でも点滅！ - ホームページ制作会社 横浜 株式会社ウィル｜横浜のホームページ制作会社
11:00〜20:00(平日)
テキストを点滅させる blink は、FirefoxやOperaなどの過去のバージョンではサポートされていましたが、 現在主要なブラウザでサポートを外されており動作しません。
blinkが使えなくなったことで困る方はいないと思いますが、
知っていて損はありませんので、CSS Animation を利用して点滅させる方法をご紹介します。
まずは、コピペで！
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;}
}HTML
<span class="blinking">点滅させたいテキストや画像</span>点滅させたいテキストや画像に「class=”blinking”」で点滅します。
DEMO ↓
gifアニメを作るよりはるかに早く、応用も効きますので
必要になった時は、思い出してみてください。
