css - translate3d でホバーする画像リンクを取得できません

Question

5 つの画像を含むヘッダーがあります。ホバーしたときに画像が10px上に遷移するようにしたいのですが、なぜか瞬時に上に移動するだけでスムーズに上がらないのです。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);
    }

サイトhttp://pannariz.comを参照できます。それはそれがどのように見えるかです

Answer 1

-webkit-transition: all .2s ease-in-out;変換のみを適用するので、試すことができます。

-webkit-transition: -webkit-transform .2s ease-in-out;Webkit ブラウザーの別のソリューションとして試すこともできます。