CodeLog

要素を点滅させる

CSS

要素を点滅させる方法を解説します。点滅させることで閲覧者の注意を引くのに役に立ちます。

点滅をおこなうクラス

.blink{
	-webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s 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;}
}

@keyframesはアニメーションの開始から終了までの動作を指定するものです。これを活用して点滅アニメーションをおこなうために透明度を0から1にアニメーションするようにしています。

点滅をおこなうクラス（.blink）では、animationで@keyframesを指定してアニメーションをおこなう時間（1s）を設定します。このアニメーションをおこなう時間を変更すれば点滅をする間隔を変えることができます。

文字を点滅させる

<span class="blink" style="color:red;">New</span>
New

画像を点滅させる

<img src="{画像のパス}" class="blink">