CSS - ホバリング動画で左利きを左に、持ち歩かずに元の位置に戻す場合

Question

私はそれをやってみましたが、うまくいきません。そのイメージを10ピクセル左に移動する必要がありますが、そうはなりません。そのdivはその中にleftのCSSを持っています。私はそれが原因だと思います。私は!importantを試しましたが、動作しませんでした。あなたはそれが任意の隣接要素の位置には影響を与えないように、右/左移動のための変換translate使用することができますhttps://jsfiddle.net/jwbvxhv0/1/

$(".seen").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){ 
    $(this).removeClass("animated") 
}) 

$(".seen").hover(function(){ 
    $(this).addClass("animated");   
}) 

---

@-webkit-keyframes example { 
    0% { 
    left: 0px; 
    } 
    25% { 
    left: 10px ! important; 
    } 
    100% { 
    left: 0px; 
    } 
} 

.seen.animated { 
    position: relative; 
    -webkit-animation-name: example; 
    -webkit-animation-duration: 2s; 
} 

Answer 1

：ここ

はJSFiddleです。移行をスムーズにするには、画像のtransformプロパティにtransitionを追加する必要があります。

更新： imgの横にボタンがある場合は、前述のようにZインデックスが高くなります。そのイメージとそのボタンの両方を含む親要素に同じ効果を適用する必要があります。

.moving-left 
 
{ 
 
    height: 100px; 
 
    position: relative; 
 
    transition: transform 0.3s ease; 
 
    transform: translateX(0px); 
 
    width: 100px; 
 
} 
 
.moving-left:hover 
 
{ 
 
transform: translateX(10px); 
 
} 
 

 
.moving-left button 
 
{ 
 
    left: 8px; 
 
    position: absolute; 
 
    top: 30px; 
 
    z-index: 99; 
 
}

<div class="moving-left"> 
 
    <img src="http://placehold.it/100X100" alt="" /> 
 
    <button>Button here</button> 
 
</div><!--.moving-left-->