Simple Headline animations?

[Pbalazs89]

Hi there,

I’m wondering if it’s possible to add simple CSS3 animations to headlines?

This is what I am going for:

@keyframes textshadowanim{
    0%{
   
        text-shadow: 0px 0px green;
        }
    99%{
    
        text-shadow: 4px 4px green;
        }
}

.animationshadow {
    animation: textshadowanim 2s infinite 0s linear;
}

I added the class to the headline in question but the animation does not start on load (or on hover) what am I doing wrong?

Thanks a lot!

[christian]

Hey @Pbalazs89,

Yes, it’s possible and in fact, your code is correct. Your animation uses the text-shadow property though and the Headline element has that too and that is the priority. Make sure the Headline’s Text Shadow options are set to 0.

You can then apply your own Text Shadow including that of the animation.

Hope that helps.