1

So I have 4 divs, I want one to fade to 1, another to fade to 0.8, and so on. I have 

@keyframes fadeIn {
   from { opacity: 0 }
   to { opacity: 1 }
}

with the opacity of each div set to 1, 0.8, 0.6, etc. Is there a way I can make it so they go their desired opacity without them all fading to 1 then snapping to whatever their value is on their element?

Improve this question
1
  • 1
    Single shot? Use transition. Commented Jan 7, 2020 at 4:53

1 Answer 1

Reset to default
0

No need to use a keyframe animation for this when you could use transition.

Here's a working example (with no JavaScript!).

div {
  opacity: 0;
  transition: opacity .5s;
}

input:checked+div {
  opacity: 1;
}

input:checked+div+div {
  opacity: .8;
}

input:checked+div+div+div {
  opacity: .6;
}

input:checked+div+div+div+div {
  opacity: .4;
}
Fade: <input type="checkbox" />
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Interesting! Thank you! Say I wanted to do this with width, would it work the same? Like 4 divs growing in from the left? (Sorry, i am not at my PC right now so cant test)
Yes, you can transition on width and many other properties.