アイコンの上にカーソルを置くと、アイコンの色がスムーズに変化するようになったことをお伝えしたいと思います。 Facebookでも同様の問題がよくあります。 アイコンが白い背景に青いシルエットである場合、マウスオーバーすると、両方の色が場所を変更し、これが即座に発生し、少しシャープに見えます。 私の美意識が傷つき、解決策を開発しました。
インターネットでこのようなものを見たことがないので、私はこのメソッドをSITH（Soft Image Transition on：Hover）と呼びます。
habrakatの下には、機器の完全な説明、すべてのコード、いくつかのスクリーンショット、およびデモバージョンへのリンクがあります。
一般に、異なる透明度値の使用を禁止する人はいません。
しかし、このアプローチでは、下の2つの画像の色をスムーズに変更することはできません。
私の方法は、ある画像が別の画像の上にあり、その透明度を反対の値にスムーズに変更するという事実に基づいています。 現時点で、CSS3の移行プロパティを使用して追加された移行が完了していない場合、画像の1つが常にユーザーに表示されます。
HTMLコード：
<div class="trash"><b></b></div>
CSS：
.trash, .trash b {
display: block;
width: 24px;
height: 21px;
background: url(/demo/img/trash-sprite.png) no-repeat 0px -21px;
cursor: pointer;
-webkit-transition: .5s opacity;
-moz-transition: .5s opacity;
-ms-transition: .5s opacity;
-o-transition: .5s opacity;
transition: .5s opacity;
}
.trash {
position: relative;
background-position: 0px 0px;
}
.trash b {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.trash:hover b {
opacity: 1;
}
次の図は、プロセス自体を示しています。
ここで実際の例を試すことができます。