Wie animiere ich `a: hover :: before 'Farbe

Question

Ich füge eine andere Farbe zum Ankerelement hinzu, wenn ich schwebte, dann füge ich eine Animation zur Farbe hinzu. Es animiert jedoch nicht.
Ist irgendetwas mit meinem Code falsch? Der Codepen ist 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 1

Ich glaube, Sie transition statt und nicht die Animation suchten.

@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