Different durations for start and end of transitions?

css, css-animations, css-transitions

Solution

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>

Problem

``` .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 to make it happen?

Original source