ホームページ制作のためになるTopics

CSSでテキスト、画像、何でも点滅!

テキストを点滅させる 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アニメを作るよりはるかに早く、応用も効きますので
必要になった時は、思い出してみてください。

その他のTopics