fadein - CSS transition fade in only for element -
is there way fade in element using css transition property? never had need before haven't looked it, , can't seem find method of doing without resorting js. possible set transition have immediate return state?
there couple ways this, depending on when want fade in occur:
/***** fade in on page load *****/ .fadeinload { border: 1px solid #48484a; font-size: 40px; animation: fadeinload 5s; } @keyframes fadeinload { { opacity:0; } { opacity:1; } } /***** fade in child when parent hovered *****/ .fadein { border: 1px solid #48484a; font-size: 18px; opacity:0; -webkit-transition : 2s ease-out; -moz-transition : 2s ease-out; -o-transition : 2s ease-out; transition : 2s ease-out; } .thistext:hover .fadein { opacity: 1; }
note: fade in on page load need simple keyframe animation, not transition.
Comments
Post a Comment