Trying to animate a hyperlink using CSS

I’m trying to apply the animation animation to the hyperlink contained in the 3rd <h4> of a div wpb_wrapper of .about_us_right.

.about_us_list_right .wpb_wrapper h4:nth-child(3) a  {
    -webkit-animation: animation 3s ease-out !important;
    -webkit-animation-iteration-count: infinite !important; 
}
@-webkit-keyframes animation {
    0% { 
        color: red !important;
    }
    50% { 
        color: green !important;
    }
    100% { 
        color: red !important;
    }
}

Can anyone see what isn’t working here? Am I not allowed to apply animations to hyperlinks?

I’ve applied these lines of code to different divs but never a hyperlink before!

>Solution :

As Bman70 said, you can not use important inside keyframes:

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

Declarations in a keyframe qualified with !important are ignored.