`a：hover :: before`の色をアニメーション化する方法

Question

アンカー要素に異なる色を追加して、その色にアニメーションを追加します。ただし、アニメーション化されません。
私のコードに何か問題はありますか？ codepenは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

私はあなたがtransition代わりにしていないアニメーションを探していたと思います。

@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