Question

我已经将一个CSS淡入/淡出解决方案应用于div，我很满意。但是我只想将它应用于背景，而不是文本。我需要文本始终完全不透明。

参见示例： http://jsfiddle.net/howiepaul/gUAPV/33/

a.tab {background-color:#d4d4d4;
font-family: arial;
font-weight: bold;}

a.tab:hover {
opacity:1;
animation: tickhov 1.5s;
-moz-animation: tickhov 1.5s; /* Firefox */
-webkit-animation: tickhov 1.5s; /* Safari and Chrome */}
@-ms-keyframes tickhov {from {opacity:0.2;} to {opacity:1;}}
@-moz-keyframes tickhov /* Firefox */ {from {opacity:0.2;} to {opacity:1;}}
@-webkit-keyframes tickhov /* Safari and Chrome */ {from {opacity:0.2;} to {opacity:1;}}

a.tab{
opacity:0.2;
animation: letgo 1.5s;
-moz-animation: letgo 1.5s; /* Firefox */
-webkit-animation: letgo 1.5s; /* Safari and Chrome */}
@-ms-keyframes letgo {from {opacity:1;} to {opacity:0.2; visibility: hidden; display: none;}}
@-moz-keyframes letgo /* Firefox */ {from {opacity:1;} to {opacity:0.2; visibility: hidden; display: none;}}
@-webkit-keyframes letgo /* Safari and Chrome */ {from {opacity:1;} to {opacity:0.2; visibility: hidden; display: none;}}

感谢任何帮助。

非常感谢豪伊

Answer 1

您应该在background-color而不是opacity上制作动画。仅供参考，如果你正在做的就是你应该使用过渡而不是动画，它们会更加简单。

jsFiddle

a.tab {
    position:relative;
    font-family: arial;
    font-weight: bold;
    background-color:rgba(212,212,212,.2);
    -moz-transition:background-color 1.5s ease;
    -webkit-transition:background-color 1.5s ease;
    transition:background-color 1.5s ease;
}

a.tab:hover {
    background-color:rgba(212,212,212,1);
}

Answer 2

不需要为此使用动画并编写如此庞大的代码。如果您只需要更改背景以保持文本不变，则应使用 CSS Transitions 。它们更简单易用，只需很少的代码即可实现。这是小提琴演示

http://jsfiddle.net/gUAPV/37/

a.tab {
    background-color: #f4f4f4; 
    font-family: arial;
    font-weight: bold;
    font-size : 40px;
}

a.tab:hover {
   background-color:#d4d4d4;

   -webkit-transition: background 300ms ease-in 200ms;
   -moz-transition: background 300ms ease-in 200ms;
   -o-transition: background 300ms ease-in 200ms;
   transition: background 300ms ease-in 200ms;
}

我增加了字体大小以使其更加突出，您可以根据您的使用进行调整。

P.S。如果你想阅读更多关于CSS Transitions的内容，这里有一些有用的链接

W3.Org Link

Mozilla Develper Forum Link

希望这会有所帮助：）

淡化背景但不是文本

2 个答案: