CSS
CSS3

CSSで点滅アニメーション

More than 3 years have passed since last update.

マウスが乗ったら特定の場所を点滅させるアニメーション。


opacityを使って点滅

flash1.gif


<p>テキストを<span class="flash1">点滅</span>させます</p>


p:hover > .flash1{
animation: Flash1 1s infinite;
}

/* アニメーション */
@keyframes Flash1{
50%{
opacity: 0;
}
}


text-shadowを使って点滅

flash2.gif


<p><span class="flash2">重要な部分</span>を強調させる時に使えます。</p>


p:hover > .flash2{
animation: Flash2 2s infinite;
}

/* アニメーション */
@keyframes Flash2{
50%{
text-shadow: 1px 1px 0 red;
}
}


box-shadowを使って点滅

flash3.gif


<p class="flash3">text-decoration: blink;は非推奨</p>


.flash3{
display: inline-block;
white-space: nowrap;
}

.flash3:hover {
animation: Flash3 2s infinite;
}

/* アニメーション */
@keyframes Flash3{
50%{
text-shadow: 1px 1px 0 red;
box-shadow: 0 1px 15px 0 blue;
}
}


画像も点滅

img_flash.gif


<p><img src="sample.png" width="200" height="200"></p>


p:hover > img{
animation: Flash4 2s infinite;
}

/* アニメーション */
@keyframes Flash4{
50%{
box-shadow: 0 1px 15px 1px blue;
}
}