Chrome CSS过渡不透明度悬停问题

Question

I'm trying the most simple of opacity transitions in Chrome, but I'm finding that although often it is smooth, sometimes it jumps straight to opacity: 0 or opacity: 1, without transitioning.

Simplified version, just for webkit:

<style type="text/css">
    .box{
        background-color: #ff0000;
        width:100px;
        height:100px;
        -webkit-transition: opacity 1s;
   }
   .box:hover{
       opacity:0;
   }
</style>

<div class="box"></div>

https://jsfiddle.net/bhydbakn/

I find the best way to make it go wrong is to roll over, click, roll off, roll over again, wait for it to reach opacity: 0, then really slowly (pixel by pixel) roll off the image in a downwards direction. When I do this, half the time it will jump straight back to opacity:1 instead of transitioning smoothly.

I'm Chrome 45.0.2454.101 m on Windows 7. Have tested on a colleague's PC and found the same issue.

Here's a video of it going wrong. It works until about half way: http://webm.host/41dce/

Answer 1

Here's an updated code:

<style>
.box {
    background-color: #ff0000;
    width: 100px;
    height: 100px;
    opacity: 1;
    -webkit-transform: translateZ(0);
    -webkit-transition: opacity 1s ease-in-out;
}
.box:hover {
    opacity: 0;
}
</style>

<div class="box"></div>

Note the default opacity added to your .box container, an easing function and default hardware acceleration by using a transform declaration.

Note that I cannot reproduce your issue. It might be a browser thing.

Answer 2

This should fix your issue

$(".box").mouseenter(
  function(){
    $(this).animate({opacity:'0'},'1000')
  });
$(".box").mouseleave(
  function() {
    $(this).animate({opacity:'1'},'1000')
  });

https://jsfiddle.net/bhydbakn/2/