Transition color fade on hover

Question

I am trying to get this h3 to fade on hover  Can someone help me out   HTML   lt h3 class  clicker  gt test lt  h3 gt    CSS   clicker       -moz-transition color  2s ease-in      -o-transition color  2s ease-in      -webkit-transition color  2s ease-in      background  f5f5f5 padding 20px      clicker hover      background  eee

User · Answer

For having a trasition effect like a highlighter just to highlight the text and fade off the bg color, we used the following:

_x000D_

.field-error {_x000D_
    color: #f44336;_x000D_
    padding: 2px 5px;_x000D_
    position: absolute;_x000D_
    font-size: small;_x000D_
    background-color: white;_x000D_
}_x000D_
_x000D_
.highlighter {_x000D_
    animation: fadeoutBg 3s; /***Transition delay 3s fadeout is class***/_x000D_
    -moz-animation: fadeoutBg 3s; /* Firefox */_x000D_
    -webkit-animation: fadeoutBg 3s; /* Safari and Chrome */_x000D_
    -o-animation: fadeoutBg 3s; /* Opera */_x000D_
}_x000D_
_x000D_
@keyframes fadeoutBg {_x000D_
    from { background-color: lightgreen; } /** from color **/_x000D_
    to { background-color: white; } /** to color **/_x000D_
}_x000D_
_x000D_
@-moz-keyframes fadeoutBg { /* Firefox */_x000D_
    from { background-color: lightgreen; }_x000D_
    to { background-color: white; }_x000D_
}_x000D_
_x000D_
@-webkit-keyframes fadeoutBg { /* Safari and Chrome */_x000D_
    from { background-color: lightgreen; }_x000D_
    to { background-color: white; }_x000D_
}_x000D_
_x000D_
@-o-keyframes fadeoutBg { /* Opera */_x000D_
    from { background-color: lightgreen; }_x000D_
    to { background-color: white; }_x000D_
}

_x000D_

<div class="field-error highlighter">File name already exists.</div>

_x000D_

User · Answer

What do you want to fade  The background or color attribute   Currently you re changing the background color  but telling it to transition the color property  You can use all to transition all properties    clicker        -moz-transition  all  2s ease-in      -o-transition  all  2s ease-in      -webkit-transition  all  2s ease-in      transition  all  2s ease-in      background   f5f5f5       padding  20px      clicker hover        background   eee      Otherwise just use transition  background  2s ease-in

[css] Transition color fade on hover?

Examples related to css