CSS transition fade in only for element

Question

Is there a way to only fade in an element using the CSS transition property? Never really had the need for this before so haven't looked into it, and now I can't seem to find a method of doing so without resorting to JS. Is it possible to set transition to have an immediate return state?

Answer 1

There a couple ways to do this, depending on when you want your fade in to occur:

jsFiddle

/***** Fade in on a page load *****/
.fadeInLoad {
    border: 1px solid #48484A;
    font-size: 40px;
    animation: fadeInLoad 5s;
}
@keyframes fadeInLoad {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

/***** Fade in child when parent hovered *****/
.fadeIn {
    border: 1px solid #48484A;
    font-size: 18px;
    opacity:0;  
    -webkit-transition : all 2s ease-out;
    -moz-transition : all 2s ease-out;
    -o-transition : all 2s ease-out;
    transition : all 2s ease-out;
}
.thisText:hover .fadeIn {
    opacity: 1; 
}

Note: to fade in on page load you need a simple keyframe animation, not a transition.