DIV CSS尺度遷移がぼやけて揺れる

Question

私が何を試みても、スケールアップしているDIVの見栄えの良い移行を得ることはできません。

https://jsfiddle.net/ugoqrap6/7/

transform: translate3d(0,0,0); 
backface-visibility: hidden; 

私は違いの提案の多くをしようとしてきたが、それらのどれも違いを作るように見えるん。私はあなたのコードで起こっている他のものがたくさんあり、ここで簡単な例を行っているtransform: scale(1.2);

Answer 1

あなたが使用することができ、これは将来の読者

他の人が指摘したようにのためにそれを容易にする必要があり、画像を伸ばすことに注意してください。

ul { 
 
    padding: 0; 
 
    margin: 50px 20px; 
 
    list-style: none; 
 
} 
 
ul li { 
 
    margin: 5px; 
 
    display: inline-block; 
 
} 
 
ul li a { 
 
    padding: 5px; 
 
    display: inline-block; 
 
} 
 
ul li a img { 
 
    width: 125px; 
 
    height: 125px; 
 
    display: block; 
 
} 
 
ul li a:hover img { 
 
    transform: scale(1.2); 
 
    transition: transform 0.5s ease; 
 
}

<ul> 
 
    <li><a href="#"><img src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg"></a></li> 
 
    <li><a href="#"><img src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg"></a></li> 
 
    <li><a href="#"><img src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg"></a></li> 
 
</ul>

Answer 2

ここでjqueryのオプションがあります、それは簡単にあなたがストレッチアニメーションを避けるフェードアウト。

$('.thumb').mouseenter(function() { 
 
    $(this).fadeTo(200, 0, function() { 
 
    $(this).css("transform", "scale(1.2)"); 
 
    $(this).fadeTo(500, 1); 
 
    }); 
 
}) 
 

 
$('.thumb').mouseleave(function() { 
 
    $(this).fadeTo(200, 0, function() { 
 
    $(this).css("transform", "scale(1)"); 
 
    $(this).fadeTo(500, 1); 
 
    }); 
 
})

ul { 
 
    padding: 0; 
 
    margin: 50px 20px; 
 
    list-style: none; 
 
} 
 
ul li { 
 
    margin: 5px; 
 
    display: inline-block; 
 
} 
 
ul li a { 
 
    padding: 5px; 
 
    display: inline-block; 
 
} 
 
ul li a img { 
 
    width: 125px; 
 
    height: 125px; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li> 
 
    <a href="#"> 
 
     <img class="thumb" src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <img class="thumb" src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg"> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="#"> 
 
     <img class="thumb" src="http://aspublic.blob.core.windows.net/drupal-files/bubble_bobble.jpg"> 
 
    </a> 
 
    </li> 
 
</ul>