CSS3 Transitions in Chrome - css

Question

I've just noticed that some CSS3 transitions have stopped working in Chrome (was working when I checked a few weeks ago) - seems fine in Safari.
I've definitely used this code before but maybe i'm overlooking something this time around?
The aim is just to have a smooth transition on hover:
Demo
HTML
<div></div>
CSS
div{
height:100px;
width:100px;
background:red;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease-in-out;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
div:hover{
right:-10px;
position:relative;
height:100px;
width:100px;
background:red;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease-in-out;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
Thanks for any advice

Answer 1

right doesn't work on static positioned element, you need to use position: relative; on load as well as you need to define right and set it to 0 or whatever you like.
Demo
div{
/* All the properties you have declared will go here plus === */
right:0; /* Add this */
position:relative; /* Add this */
}
Using position: relative; on load will help you transit your element on mouse out as well as on mouse over, so if you are setting position: relative; on :hover then your element will fail to transit on mouse out.
Also, I've noticed that you are not using any standard property for transition so make sure you use them.