Fade Background, но NOT Text

Question

Я применил решение CSS fade in/out для 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;}} 

Любая помощь будет с благодарностью принят.

Большое спасибо Howie

Answer 1

Вы должны анимировать на background-color не opacity. FYI, если это все, что вы делаете, вы должны использовать переходы вместо анимации, они намного проще.

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-переходы. Они намного проще и удобны в использовании, и это может быть достигнуто с очень небольшим количеством строк кода. Вот скрипка Demo

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

Надеюсь, это поможет :)