ruk·si

🎨 CSS
Flickering Text

Updated at 2014-01-18 15: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;
    }
}

Source