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!

So what isn't working about yours? Is it essentially the same as below?

I removed all the "!important" it was cluttering it up.
The anchor <a> tag IS actually inside the H4 correct? That's how I did it.

p.s. I assumed by "div wpb_wrapper of .about_us_right" you meant .web_wrapper is inside about_us_right.
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

@-webkit-keyframes animation {
    0% {
      
        color: red;
    }
    50% {
      
        color: green;
    }
    100% {
      
        color: red;
    }
}

.about_us_list_right .wpb_wrapper h4:nth-child(3) a  {
    -webkit-animation: animation 3s ease-out;
    -webkit-animation-iteration-count: infinite;
}

<!-- language: lang-html -->

<div class="about_us_list_right">

<div class = "wpb_wrapper">
<h4>First H4</h4>
<h4>Second H4</h4>
<h4><a href="the link">Third H4</a></h4>
</div>

</div>

<!-- end snippet -->

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.