Ease-in-out function doesn't work, what to do?

Question

All my buttons have an ease-in-out function. They work all, only my social buttons doesn't work properly. They give the opacity, but not the ease-in-out of 3s.

This is what I have:

<div class="contact-links">
<a class="fb" href="https://www.facebook.com/cgiphart" target="_blank"><img src="images/icon_fb.png" width="40px" height="40px"></a>
<a class="da" href="https://www.veavictis.deviantart.com" target="_blank"><img src="images/icon_da.png" width="40px" height="40px"></a>
</div>

.contact-links 
{
    position:absolute;
    float:left;
   -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
}


.contact-links a:hover
{

    opacity: 0.5;

}

Answer 1

Target the transitioning on the Anchor elements , and add an default opacity for the non-hover state.

.contact-links a {
    opacity:1;
    position:absolute;
    float:left;    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out; }

Answer 2

You need to define a value for opacity on .contact-links, otherwise you are transitioning from an unknown value, so no keyframes can be extrapolated and the transition will not be implemented.

You also need to define the transition on the elements being animated. The below CSS should work:

.contact-links a{
    opacity:1; /* <-- any transitioning property needs a starting value */
    -webkit-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
}  
.contact-links a:hover{
    opacity: 0.5;
}