CSSでテキストを点滅させるカスタマイズ

CSSだけで点滅させてみる

トップぺージの一番上に表示される記事に

1. 新着記事（New Articles）の見出しを表示
2. さらに点滅させたい

と思いカスタマイズを行いました。

参考にさせていただいたサイト

今回、参考にさせていただいたのはこちらのサイト。コピペできるコードが公開されているのでお借りしました(^^)

HTML

ここで点滅させる文字とクラス（class=”blinking”）を設定します。

<span class="blinking">点滅させたいテキストをここに入れる</span>

CSS

こちらが点滅させるための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;}
}

一度CSSを設定しておくと、

例えばここを点滅させたいな！

と思ったときにクラス（class=”blinking”）を追加するだけなので簡単。参考にしてみてください♪