Firefoxでホバー上の中心からアニメーションのサイズを変更

Question

私はこのアニメーションを持っています。ホバリングでは私のスパンのサイズが大きくなります。しかし、マウスの中心から始まるアニメーションが好きです。SafariやGoogle Chromeではうまく動作しますが、Mozilla Firefox（50.1.0）ではうまく動作しません。

なぜですか？

https://jsfiddle.net/9rrbzwem/11/

$(document).mousemove(function(e) { 
    $("span").css({ 
    left: e.pageX - 50, 
    top: e.pageY - 50 
    }); 
}); 

$("div").hover(function() { 
    $(this).stop().animate({ opacity: 0.5 }, 0); 
    $("span").stop().animate({ 
    height: 100, 
    width: 100, 
    margin: 0 // changed 
    }, 200); 
}, function() { 
    $(this).stop().animate({ opacity: 1 }, 0); 
    $("span").stop().animate({ 
    height: 0, 
    width: 0, 
    margin: 50 // changed 
    }, 200); 
}); 

Answer 1

あなたは、CSSが位置span要素に変換を使用することができます。

$(document).mousemove(function(e) { 
 
    $("span").css({ 
 
    left: e.pageX, 
 
    top: e.pageY 
 
    }); 
 
}); 
 

 
$("div").hover(function() { 
 
    $(this).stop().animate({ opacity: 0.5 }, 0); 
 

 
}, function() { 
 
    $(this).stop().animate({ opacity: 1 }, 0); 
 

 
});

div { 
 
    width: 400px; 
 
    height: 100px; 
 
    background-color: grey; 
 
    position: absolute; 
 
} 
 
div:hover span { 
 
    width: 100px; 
 
    height: 100px; 
 
    -moz-transform-origin: center; 
 
    -webkit-transform-origin: center; 
 
    transform-origin: center; 
 
} 
 
span { 
 
    display: block; 
 
    height: 0px; 
 
    width: 0px; 
 
    position: absolute; 
 
    background: red; 
 
    border-radius: 50px; 
 
    pointer-events: none; 
 
    -moz-transition: width 2s ease, height 2s ease; 
 
    -moz-transform: translate(-50%, -50%); 
 
    -moz-transform-origin: center; 
 
    
 
    -webkit-transition: width 2s ease, height 2s ease; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -webkit-transform-origin: center; 
 
    
 
    transition: width 2s ease, height 2s ease; 
 
    transform: translate(-50%, -50%); 
 
    transform-origin: center; 
 
}

<div><span></span></div>

https://jsfiddle.net/gt73k2ox/