Can't get image links to hover with translate3d

Question

I have a header with five images. I want the images to transition 10px up when hovered, but for some reason they just move up instantly and do not go up smoothly. I am using Google Chrome.

    .navbar img {
        position: relative;
        top: 0px;
        transition: transform .2s ease-in-out;
    }

    .navbar img:hover {
        transform: translate3d(0px, -10px, 0px);
        -webkit-transform: translate3d(0px, -10px, 0px);
    }

You can look up the site, http://pannariz.com. That's what it looks like

Answer 1

You could try -webkit-transition: all .2s ease-in-out; since you only apply transform.

YOu could also try -webkit-transition: -webkit-transform .2s ease-in-out; as another solution for webkit browsers.