Browser transition inconsistency

by jamygolden

HTML

<p>Hover me</p>
<div></div>

CSS

div{background: papayawhip; height: 100px; width: 100px; position: absolute; left: 5%; top: 100px;
    -moz-transition: 0.5s left ease;
    -ms-transition: 0.5s left ease;
    -o-transition: 0.5s left ease;
    -webkit-transition: 0.5s left ease;
    transition: 0.5s left ease;}
p:hover + div{left: 200px;}

JavaScript

/*
    Transition from percentage to pixel value.
    left: 5% to left: 200px
    Browser Support:
        Firefox
*/