CSS - Flickering Text
Updated at 2014-01-18 13:43
Example
No
Vacancy
Markup
<div class="flicker-container">
<div>N<span class="flick-1">o</span></div>
<div>Vaca<span class="flick-2">nc</span>y</div>
</div>
.flicker-container {
padding: 20px;
background: black;
color: red;
font-family: sans-serif;
font-size: 75px;
line-height: 75px;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
}
.flick-1 {
-webkit-animation: flick-1-anim 10s linear infinite;
animation: flick-1-anim 10s linear infinite;
}
.flick-2 {
-webkit-animation: flick-2-anim 8s linear infinite;
animation: flick-2-anim 8s linear infinite;
}
@-webkit-keyframes flick-1-anim {
0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
opacity: 0.99;
text-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
}
20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
opacity: 0.4;
text-shadow: none;
}
}
@keyframes flick-1-anim {
0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
opacity: 0.99;
text-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
}
20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
opacity: 0.4;
text-shadow: none;
}
}
@-webkit-keyframes flick-2-anim {
0%, 12%, 18.999%, 23%, 31.999%, 37%, 44.999%, 46%, 49.999%, 51%, 58.999%,
61%, 68.999%, 71%, 85.999%, 96%, 100% {
opacity: 0.99;
text-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
}
19%, 22.99%, 32%, 36.999%, 45%, 45.999%, 50%, 50.99%, 59%, 60.999%,
69%, 70.999%, 86%, 95.999% {
opacity: 0.4;
text-shadow: none;
}
}
@keyframes flick-2-anim {
0%, 12%, 18.999%, 23%, 31.999%, 37%, 44.999%, 46%, 49.999%, 51%, 58.999%,
61%, 68.999%, 71%, 85.999%, 96%, 100% {
opacity: 0.99;
text-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
}
19%, 22.99%, 32%, 36.999%, 45%, 45.999%, 50%, 50.99%, 59%, 60.999%,
69%, 70.999%, 86%, 95.999% {
opacity: 0.4;
text-shadow: none;
}
}