Efeito “fade” no Background utilizando “transition-property” – CSS3

Como criar o efeito Fade no Background utilizando “transition-property” com CSS3.

A propriedade transition-property especifica o nome da propriedade CSS para que ocorra o efeito de transição (o efeito de transição começará quando a propriedade CSS especificada for alterada).

Um efeito de transição normalmente pode ocorrer quando um usuário passa o mouse sobre um elemento (hover event).

Especifique sempre a propriedade de duração de transição, caso contrário, a duração é 0 e a transição não terá efeito.

Exemplo efeito fade

Exemplo do efeito Fade utilizando uma cor sólida de background:

Passe o mouse

CSS utilizado:

.fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.fade:hover, .fade:focus, .fade:active {
  background-color: #2098D1;
  color: white;
}

Código CSS reduzido

Utilize essa versão para incluir em seu projeto.

.fade{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;overflow:hidden;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:color,background-color;transition-property:color,background-color}.fade:active,.fade:focus,.fade:hover{background-color:#2098D1;color:#fff}