Question

我为锚元素添加了不同的颜色，当悬停时，我会为颜色添加动画。但它没有动画。
我的代码有什么问题吗？ codepen是here。

＆＃13;

@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;
}

＆＃13;

<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

＆＃13;

Answer 1

我认为您正在寻找transition而不是动画。

＆＃13;

@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;
}

＆＃13;

<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

＆＃13;

如何动画`a：hover :: before`颜色

1 个答案: