変換：スケール（n）; - mouseoutとmouseoutが異なる

Question

私はtransform：scale（）を使用しています。ウェブサイト上で誰かがWebで検索して解決できない質問で私を助けてくれることを願っています。

ここ

は私のコードです： HTML：

<div class="hopp_circle_img"> 
    <img src="..." alt="" /> 
</div> 

CSS：

.hopp_circle_img { 
    position: relative; 
    width: 100% !important; 
    height: 100% !important; 
    max-width: 100% !important; 
    max-height: 100% !important; 
    overflow: hidden; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    z-index: 0; 
} 
.hopp_circle_img img { 
    -webkit-transition: transform 0.15s; 
    transition: transform 0.15s; 
} 
.hopp_circle_img img:hover { 
    display: block; 
    z-index: 100; 
    -webkit-transform: scale(1.25); 
    transform: scale(1.25); 
} 

正常に動作しますが、私は粗いが、中に移動したときの効果が異なるように頼まれた、それはより外に出る。例えば。マウス入力時には速くスケーリングできますが、マウス出力では遅くなります。 CSS3またはJavascriptのいずれかのソリューションはありますか？

は、それが推移している間 rabox

Answer 1

は（.hopp_circle_img img:hover）の要素（.hopp_circle_img img）にゆっくりと移行、および要素への高速移行を設定していただきありがとうございます。したがって、要素を離れると、遅い遷移が有効になります。

私は別の期間と緩和でtransition shorthand propertyを設定しましたが、あなただけのtransition-durationを変更したり、transition-delayまたは異なるtransition-timing-function (easing)を設定することができます。

.hopp_circle_img { 
 
    position: relative; 
 
    width: 100% !important; 
 
    height: 100% !important; 
 
    max-width: 100% !important; 
 
    max-height: 100% !important; 
 
    overflow: hidden; 
 
    -webkit-border-radius: 50%; 
 
    border-radius: 50%; 
 
    z-index: 0; 
 
} 
 
.hopp_circle_img img { 
 
    -webkit-transition: transform 0.5s ease-out; 
 
    transition: transform 0.5s ease-out; 
 
} 
 
.hopp_circle_img img:hover { 
 
    display: block; 
 
    z-index: 100; 
 
    -webkit-transform: scale(1.25); 
 
    transform: scale(1.25); 
 
    -webkit-transition: transform 0.15s; 
 
    transition: transform 0.15s; 
 
}

<div class="hopp_circle_img"> 
 
    <img src="https://65.media.tumblr.com/avatar_39c12973e9fe_128.png" alt="" /> 
 
</div>

Answer 2

申し訳ありませんが、直接、投稿した後、私は自分で話題を解決しました。ホバリングには、異なる遷移時間が必要です。例えば

.hopp_circle_img img { 
    -webkit-transition: transform 0.15s; 
    transition: transform 0.15s; 
} 
.hopp_circle_img img:hover { 
    display: block; 
    z-index: 100; 
    -webkit-transform: scale(1.25); 
    transform: scale(1.25); 
    -webkit-transition: transform 2s; 
    transition: transform 2s; 

}

}