Arif Arif - 1 month ago 7
CSS Question

Different durations for start and end of transitions?



.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>





Here, when I hover over
.box
,
.circle
fades in in 0.5s. Now when I move my cursor away from
.box
, I want
.circle
to fade out at a different speed (say, 1s). How can I make that happen?

Answer

You need to set the off duration on the non-hover state, and the on duration on the hover.

That is because once you hover, the :hover properties take precedence (assuming your selectors are correctly specified), so the duration you have for hover will apply. Once you hover off, the properties set on the normal element apply.

.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>

Comments