如何動畫`答：懸停:: before`顏色

我添加不同的顏色來錨定元素，徘徊的時候，然後我添加動畫的顏色。但它不生動。
我的代碼有什麼問題嗎？該codepen是here。如何動畫`答：懸停:: before`顏色

@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

來源

2016-11-27 xg wang

哪裏是你的'animation'？或者你的意思是把'transition'代替？ – Erevald

我認爲你正在尋找替代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

來源

2016-11-27 22:57:17 Erevald

謝謝！我愚蠢的把他們混在一起。 –

如何動畫`答：懸停:: before`顏色

回答

相關問題