Различные длительности для начала и конца переходов?

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: blue; 
 
} 
 

 
.circle { 
 
    margin-top: 20px; 
 
    width: 80px; 
 
    height: 80px; 
 
    border-radius: 100%; 
 
    background: red; 
 
    opacity: 0; 
 
    transition: opacity 0.5s ease; 
 
} 
 

 
.box:hover + .circle { 
 
    opacity: 1; 
 
}

<body> 
 
    <div class="box"> 
 
    </div> 
 
    <div class="circle"> 
 
    </div> 
 
</body>

Здесь, когда я наведите курсор мыши на .box, .circle выцветает в 0,5с.

Теперь, когда я перемещаю свой указатель от .box, я хочу, чтобы .circle исчезал с другой скоростью (скажем, 1 с). Как это сделать?

источник

2016-10-23 Arif

Вам необходимо установить длительность выключения в состоянии без зависания и длительность включения при наведении.

Это происходит потому, что, как только вы наведете, то :hover свойства имеют преимущество (предполагающие ваши селекторы правильно указаны), поэтому продолжительность у вас есть для висения будет применяться. После того, как вы наведите указатель мыши, применяются свойства, установленные на нормальном элементе.

.box { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: blue; 
 
} 
 
.circle { 
 
    margin-top: 20px; 
 
    width: 80px; 
 
    height: 80px; 
 
    border-radius: 100%; 
 
    background: red; 
 
    opacity: 0; 
 
    transition: opacity 2s ease; 
 
} 
 
    
 
.box:hover + .circle { 
 
    opacity: 1; 
 
    transition-duration:0.5s 
 
}

<div class="box"></div> 
 
<div class="circle"></div>

источник

2016-10-23 17:41:32

Различные длительности для начала и конца переходов?

ответ

Смежные вопросы