CSSでテキスト点滅

• Jun 19, 2015
• Tags: css, tips

CSSでテキストを点滅。

HTML

<p class="blink">点滅させたいテキスト</p>

CSS

.blink{
 -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;}
}