CSS: transition opacity on mouse-out?

css animation on leave hover
css transition: opacity fade in
transition properties css
animation width css
css transition speed
css transform animation
css animation effects
css slide transition effects
.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/

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/

css3 - CSS: transition opacity on mouse-out?, .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:​  The CSS opacity transition is often used to create fade-in and fade-out effects. Although this works great on the first glance, it can also be the cause of some hard to find bugs with mouse events. Although this works great on the first glance, it can also be the cause of some hard to find bugs with mouse events.

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.

Different Transitions for Hover On / Hover Off, In other words, "Different transitions on mouseenter and mouseleave" as those are the DOM events that happen, but we're not using JavaScript  The Normal Syntax: Mouse In and Out Are Equal There are a few different ways that we can go about applying a CSS transition. The first one we’ll look at is the plain old default, meaning we’ll use the standard syntax that you’ll find if you run a Google search for how to implement a CSS transition.

$(window).scroll(function() {    
    $('.logo_container, .slogan').css({
        "opacity" : ".1",
        "transition" : "opacity .8s ease-in-out"
    });
});

Check the fiddle: http://jsfiddle.net/2k3hfwo0/2/

css3 transition on mouseout, Check this fiddle; as you noticed when you hover over the text a background is applied. I want to apply the same effect on mouse out, is it  That does revert the transition, but the problem is that if the mouse is out before the end of the hover transition we get this "jump". After some searching apparently the state of element must be "persisted" so that we can revert from end rotation position, for that "animation-fill-mode: forwards;" can be used, but it doesn't seem to work.

CSS mouseouver & mouseout transitions, 5. position: relative;. 6. -webkit-transition: opacity 1.5s ease;. 7. transition: opacity 1.5s ease; /* Transition when the mouse leaves the element */. 8. width: 150px;. If you want different CSS transition delays on hover and mouseout, you have to set them using the relevant selectors.In the example below, when an element is hovered, the initial delay on hover is 0 but on mouseout the transition is delayed by 1s.

How To - Transition on Hover, Transition on Hover. CSS transitions allows you to change property values smoothly (from one value to another), over a given duration. Add a transition effect (opacity and background color) to a button on hover:  In other words, “Different transitions on mouseenter and mouseleave” as those are the DOM events that happen, but we’re not using JavaScript here, we’re talking about CSS :hover state and CSS3 transitions. Hover on, some CSS property animates itself to a new value; hover off, a different CSS property animates. This is a simple trick.

CSS Transitions, CSS transitions allows you to change property values smoothly, over a given duration. Mouse over the element below to see a CSS transition effect: CSS. In this  The transition-timing-function property specifies the speed curve of the transition effect. The transition-timing-function property can have the following values: ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default) linear - specifies a transition effect with the same speed from start to end

Comments
  • I use Safari and it works perfectly even when I leave the object with the mouse... What is the problem?
  • Nope, doesn't work for me! The transition works when I hover the red box! When leaving the red box with the mouse it "jumps" back to the full opacity - I want it to animate on mouse-out as well!
  • Why not to use filter ... caniuse.com/#search=filter