xg wang xg wang - 7 days ago 7
HTML Question

how to animate `a:hover::before` color

I add a different color to anchor element, when hovered, then I add an animation to the color. However it does not animate.

Is there anything wrong with my code?
The codepen is here.



@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

.social-buttons a::before {
font-family: 'Fontawesome';
-webkit-font-smoothing: antialiased;
content: '\f08e';
font-size: 3em;
color: #888;
animation: color .5s ease-in-out;
}
.social-buttons a:hover::before {
color: #0275d8;
animation: color .5s ease-in-out;
}

<div class="social">
<h4>Around the Web</h4>
<div class="social-buttons">
<a target="_blank" href="https://www.linkedin.com/in/xingan-wang"><span class="sr-only">Linkedin</span></a>
<a target="_blank" href="https://github.com/"><span class="sr-only">Github</span></a>
<a target="_blank" href="https://www.facebook.com/"><span class="sr-only">Facebook</span></a>
<a target="_blank" href="https://twitter.com/"><span class="sr-only">Twitter</span></a>
</div>
</div




Answer

I think you were looking for transition instead and not animation.

@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');

.social-buttons a::before {
    font-family: 'Fontawesome';
    -webkit-font-smoothing: antialiased;
    content: '\f08e';
    font-size: 3em;
    color: #888;
    transition: color .5s ease-in-out;
}
.social-buttons a:hover::before {
    color: #0275d8;
}
<div class="social">
  <h4>Around the Web</h4>
  <div class="social-buttons">
    <a target="_blank" href="https://www.linkedin.com/in/xingan-wang"><span class="sr-only">Linkedin</span></a>
    <a target="_blank" href="https://github.com/"><span class="sr-only">Github</span></a>
    <a target="_blank" href="https://www.facebook.com/"><span class="sr-only">Facebook</span></a>
    <a target="_blank" href="https://twitter.com/"><span class="sr-only">Twitter</span></a>
  </div>
</div

Comments