transform: масштаб (n); - отличается от mousein, чем от mouseout

Question

Я использую transform: scale(); на веб-сайте. Я надеюсь, что кто-то может помочь мне с вопросом, который я не мог решить, найдя в Интернете.

Вот мой код: 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), и быстрый переход к элементу, пока он парил (.hopp_circle_img img:hover). Поэтому, когда вы покинете элемент, будет действовать более медленный переход.

Я установить 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; 

}

}