このトランジションはデスクトップでは正常に機能しますが、モバイルでは「ホバー」イベントがモバイルのタップとして解釈され、新しい画像を置き換える代わりに画像が消えるだけです。他のすべてのトランジションは機能します。
.mark.studio{
background: url(../images/studio_icon.png) no-repeat;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
height: 50px;
width: 50px;
z-index:103 !important;
}
.mark.studio:hover{
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-transition: all .3s ease-in-out;
background: url(../images/studio_icon-hover.png) no-repeat;
}