Größe der Animation von der Mitte auf einem Hover mit Firefox

Question

Ich habe diese Animation und auf dem Hover die Größe auf meiner Spannweite ist größer. Aber ich möchte, dass die Animation von der Mitte der Maus aus startet, sie funktioniert gut mit Safari und Google Chrome, aber nicht mit Mozilla Firefox (50.1.0).

Warum?

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

Sie können auf Position span-Element CSS-Transformation verwenden.

$(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/