Blinking Text Shadow CSS3

Question

I was wondering if there was any way to get text shadow to blink in CSS3. Can anyone help me out? Here is what I have and I just want the text shadow to blink. Thanks!

#container .title {
    color: #ba8b00;
    padding: 25px 0 30px 0;
    width: 560px;
    font-size: 42px;
    text-shadow: 3px 3px 5px #ba8b00;
}

score 4 · Accepted Answer · answered Jun 23 '13 at 04:50

4

This should help you to begin with

@-webkit-keyframes myfirst
{
    from {text-shadow: 3px 3px 5px #ba8b00;}
    to {text-shadow : none;}
}

@-moz-keyframes myfirst
{
    from {text-shadow: 3px 3px 5px #ba8b00;}
    to {text-shadow : none;}
}
@keyframes myfirst
{
    from {text-shadow: 3px 3px 5px #ba8b00;}
    to {text-shadow : none;}
}

#container .title {
    color: #ba8b00;
    padding: 25px 0 30px 0;
    width: 560px;
    font-size: 42px;
    text-shadow: 3px 3px 5px #ba8b00;
    -webkit-animation: myfirst 1s 98765432;
    -moz-animation: myfirst 1s 98765432;
    animation: myfirst 1s 98765432;
}

answered Jun 23 '13 at 04:50

mohkhan

11,925
2
24
27

Awesome works well. What are those long numbers after the 1s? – James Manes Jun 23 '13 at 04:56
That's the number of times the animation should run. you can substitue it with `infinite` for endless animation. – mohkhan Jun 23 '13 at 05:00

Blinking Text Shadow CSS3

1 Answers1