Question 194055 in CSS Question posted in
Some basic documentation can be found here.

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!

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    @-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;
}
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search