css - CSS3 transform and transition doesn't work properly on firefox -

i'm trying make affect on box drop 5px down when hovering.

it work smoothly on chrome on firefox it's doesn't transition.

please have @ next codepen using firefox , using chrome

<div class="test"></div>  .test {     background-color:blue;     width: 200px;     height: 200px;     @include transition(transform .3s 0 ease);     @include transform(translatey(0));     &:hover {       @include transform(translatey(5px));     }  } 

using padding

here's preferred method using padding:
jsfiddle demo

css:

body {     margin: 0;     padding: 0; }  .test {     background-color:blue;     width: 200px;     height: 200px; } .test:hover {     margin-top: 10px; } .transition {     -webkit-transition: margin 0.5s ease-out;     -moz-transition: margin 0.5s ease-out;     -o-transition: margin 0.5s ease-out;     transition: margin 0.5s ease-out; } 

using transform

or if still want use transform:
jsfiddle demo

css:

body {     margin: 0;     padding: 0; } .test {     background-color:blue;     width: 200px;     height: 200px; } .test:hover {     -webkit-transform: translatey(10px);     -moz-transform: translatey(10px);     -ms-transform: translatey(10p));     -o-transform: translatey(10px);     transform: translatey(10px); } .transition {     -webkit-transition: -webkit-transform 0.5s ease-out;     -moz-transition: -moz-transform 0.5s ease-out;     -o-transition: -o-transform 0.5s ease-out;     transition: transform 0.5s ease-out; } 

as kiran said already, each browser has varying support directly using transform , transition. can check can use transforms here , transitions here.

also take note transition wasn't applied :hover. needs called @ base level (in case @ div level).