文字を点滅する方法【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;}
}

Html

<span class="blinking">点滅させたいテキストや画像</span>

結果

点滅させたいテキストや画像

コメント

タイトルとURLをコピーしました