CSS transition opacity on mouse-out

Question

item hover           zoom  1          filter  alpha opacity 50           opacity  0 5          -webkit-transition  opacity  15s ease-in-out          -moz-transition  opacity  15s ease-in-out          -ms-transition  opacity  15s ease-in-out          -o-transition  opacity  15s ease-in-out          transition  opacity  15s ease-in-out          Why does this only animate the opacity when I hover-in but not when I leave the object with the mouse   Demo here  http   jsfiddle net 7uR8z

User · Answer

I managed to find a solution using css jQuery that I m comfortable with   The original issue   I had to force the visibility to be shown while animating as I have elements hanging outside the area   Doing so  made large blocks of text now hang outside the content area during animation as well   The solution was to start the main text elements with an opacity of 0 and use addClass to inject and transition to an opacity of 1   Then removeClass when clicked on again   I m sure there s an all jQquery way to do this   I m just not the guy to do it      So in it s most basic form      slideDown   addClass  load     slideUp   removeClass  load      Thanks for the help everyone

User · Answer

You re applying transitions only to the  hover pseudo-class  and not to the element itself    item        height 200px    width 200px    background red     -webkit-transition  opacity 1s ease-in-out    -moz-transition  opacity 1s ease-in-out    -ms-transition  opacity 1s ease-in-out    -o-transition  opacity 1s ease-in-out    transition  opacity 1s ease-in-out      item hover     zoom  1    filter  alpha opacity 50     opacity  0 5      Demo  http   jsfiddle net 7uR8z 6   If you don t want the transition to affect the mouse-over event  but only mouse-out  you can turn transitions off for the  hover state     item hover     -webkit-transition  none    -moz-transition  none    -ms-transition  none    -o-transition  none    transition  none    zoom  1    filter  alpha opacity 50     opacity  0 5      Demo  http   jsfiddle net 7uR8z 3

User · Answer

window  scroll function                 logo container   slogan   css            opacity      1            transition     opacity  8s ease-in-out                Check the fiddle  http   jsfiddle net 2k3hfwo0 2

[css] CSS: transition opacity on mouse-out?

Examples related to css

Examples related to css-transitions