Mozilla and Chrome difference on CSS - html

Question

I have a problem with my CSS. It works well on chrome but not on Mozilla Firefox.
My code is getting twitter icon to the left, when mouse is over the icons.
My HTML code:
<header>
<div id="animation">
<a href="http://www.facebook.com.tr">
<img id="socialiconface" src="images/facebook.png">
</a>
<a href="http://www.twitter.com.tr">
<img id="socialicon" src="images/twitter.png">
</a>
</div>
</header>
And my CSS is there:
#socialicon {
position: absolute;
-webkit-transition-property: margin-right;
-moz-transition-property: margin-right;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
width: 40px;
height: 40px;
top: 5px;
right: 2px;
}
#socialiconface {
position: absolute;
width: 50px;
height: 50px;
top: 5px;
right: 2px;
}
#socialicon:hover {
margin-right: 70px;
}
Whatever I tried, that doesn't work unfortunately, could someone help me out?

Answer 1

Update this line to cover the whole animation div, otherwise you will have to follow the icon with your mouse for it to animate bacause it moves away.
#animation:hover #socialicon {
margin-right: 70px;
}
Full code:
#socialicon {
position: absolute;
-webkit-transition-property: margin-right;
-moz-transition-property: margin-right;
-webkit-transition-duration:2s;
-moz-transition-duration: 2s;
width:40px;
height: 40px;
top: 5px;
right: 2px;
}
#socialiconface {
position:absolute;
width:50px;
height: 50px;
top: 5px;
right: 2px;
}
#animation:hover #socialicon {
margin-right: 70px;
}
img {
background: #ccc;
}
<header>
<div id="animation">
<img id="socialiconface" src="images/facebook.png" />
<img id="socialicon" src="images/twitter.png" />
</div>
</header>

Answer 2

The reason is because once the img moves past the mouse cursor, the :hover style is no longer applied. Even Chrome does this, but it seems that it doesn't check the :hover state until the mouse moves.
You can try animating right instead of margin and giving some right padding instead:
#socialicon {
position: absolute;
-webkit-transition-property: right;
-moz-transition-property: right;
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
width: 40px;
height: 40px;
top: 5px;
right: -68px;
padding-right: 70px
}
#socialiconface {
position: absolute;
width: 50px;
height: 50px;
top: 5px;
right: 2px;
}
#socialicon:hover {
right: 2px;
}
<header>
<div id="animation">
<a href="http://www.facebook.com.tr">
<img id="socialiconface" src="images/facebook.png">
</a>
<a href="http://www.twitter.com.tr">
<img id="socialicon" src="images/twitter.png">
</a>
</div>
</header>