.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

Share Improve this question Follow edited Mar 11, 2020 at 1:39 RBT 26k2424 gold badges175175 silver badges260260 bronze badges asked Mar 11, 2020 at 1:24 RobertRobert 4111 silver badge44 bronze badges 1

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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;
  }
}