.item {
  opacity: 0;
  transition: opacity 6s;
}

I'm using JS to set the opacity from 0 to 1 and vise-versa.

Is there a way in CSS to make the opacity transition from 0-1 last 6 seconds, but have the transition from 1-0 last 0 seconds?

I suppose I could set the transition property in JS, but is there a way to produce this behavior with CSS?

.item {
  opacity: 0;
  transition: opacity 6s;
}

I'm using JS to set the opacity from 0 to 1 and vise-versa.

Is there a way in CSS to make the opacity transition from 0-1 last 6 seconds, but have the transition from 1-0 last 0 seconds?

I suppose I could set the transition property in JS, but is there a way to produce this behavior with CSS?

• javascript
• html
• css

• 1 You would have to define the animation's key frames and their durations. @keyframes See also developer.mozilla/en-US/docs/Web/CSS/@keyframes, alternatively you could use 2 different CSS classes one called styleVisible and the other called styleHidden with the timings set the way you want on each style. – Jay Commented Mar 11, 2020 at 1:30

2 Answers 2

Use transition property in the two different classes where you would be setting different opacity.

.itemHidden {
  opacity: 0;
  transition: opacity 6s;
}

.itemShown {
  opacity: 1;
  transition: opacity 0s;
}

I like Vijay's answer since it is a lot shorter and sweeter. However, I think it is worth seeing how you could create an animation with keyframes since that was also mentioned in one of the ments. An example using keyframes would be something like this:

.item {
  animation-name: demo-animation;
  animation-duration: 6s;
}

@keyframes demo-animation
{
  25% {
    opacity: .25;
  }
  50% {
    opacity: .5;
  }
  75% {
    opacity: .75;
  }
  99.99% {
    opacity: 1;
  }
    100% {
    opacity: 0;
  }
}