こんにちは、Habr！
アイコンの上にカーソルを置くと、アイコンの色がスムーズに変化するようになったことをお伝えしたいと思います。 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;
}
次の図は、プロセス自体を示しています。
ここで実際の例を試すことができ
ます。