widget should #wrap #tri
So you keep hovering it.
#tri should be at opacity 1 by defaut and turned to zero onload. With animation like :
#tri {animation : onloadifavailable 0s infinite ;}
@keyframes onloadifavailable {
0,100% {opacity:0;}
}
Then when you hover, #widget, you change animation name .
For hover :
#widget:hover #tri {
animation: showit 3s ;
}
@keyframes showit {
0% {opacity:0;}
100% {opacity:1}
}
HTML:
<div id="widget">
<div id="tri" class="ibox">
<form id="trif" action="" method="get">
<input id="ipbox" type="text" name="i1" value="trialbox">
</form>
</div>
</div>
What is important is not to set by defaut #tri at opacity:0; from the beginning. Keep in mind that a browser may not support animation.