淡入淡出文本悬停时闪烁答案

【问题标题】：Flicker on fadein text hover淡入淡出文本悬停时闪烁
【发布时间】：2016-06-10 00:17:51
【问题描述】：

我有一个简单的淡入 css... 我想要它，所以当您将鼠标悬停在文本上时，边框底部会淡入。但是，当我悬停时，文本会短暂消失，然后随着边框淡入，所以它闪烁。如何获取它，以便文本在悬停时保持不变并且只有边框淡入？

CSS

.nav li a:hover{
border-bottom: 2px solid #000000;
-webkit-animation: fadein .5s; /* Safari and Chrome */
-moz-animation: fadein .5s; /* Firefox */
-ms-animation: fadein .5s; /* Internet Explorer */
-o-animation: fadein .5s; /* Opera */
animation: fadein .5s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

HTML

<ul class="nav navbar-nav">
  <li> <a href="#" role="button" aria-expanded="false">About</a></li>
  <li> <a href="#" role="button" aria-expanded="false">Services</a></li>
  <li> <a href="#" role="button" aria-expanded="false">Portfolio</a></li>
  <li> <a href="#" role="button" aria-expanded="false">Contact</a></li>
 </ul>

【问题讨论】：

这不应该是过渡而不是动画吗？这似乎是一种复杂的处理方式。

标签： css fadein flicker

【解决方案1】：

您可以删除行 border-bottom: 2px solid #000000; 并改为添加：

.nav li a {
  border-bottom: 2px solid rgba(0,0,0,0);
}

并改变所有这些：

from { opacity: 0; }
to   { opacity: 1; }

到

from { border-bottom-color: rgba(0,0,0,0); }
to   { border-bottom-color: rgba(0,0,0,1); }

请参阅此Fiddle 以供参考。

或者，正如@Paulie_D 在 cmets 中所建议的，您也可以这样做：

.nav li a {
  border-bottom: 2px solid rgba(0,0,0,0);
}

.nav li a:hover{
  border-bottom: 2px solid rgba(0,0,0,1);
  -webkit-transition: border-bottom .4s ease;
  -moz-transition: border-bottom .4s ease;
  -ms-transition: border-bottom .4s ease;
  -o-transition: border-bottom .4s ease;
  transition: border-bottom .4s ease;
}

这显然使一切变得容易得多。

Fiddle 用于第二个版本

【讨论】：