I have an element with id of lightning
and class of either active
or inactive
. The active
class has an animation that changes the opacity
, while the inactive
class has a set opacity
. The lightning
id SHOULD transition opacity
, but it does not work.
fiddle
When I remove the animation from the active
class, it all works. Why doesn’t the transition
work with an animation
of the same property?
What I am trying to achieve is:
- When going from
active
toinactive
, theopacity
transitions from whatever the last value was to 0 over the course of 2 seconds. - When going from
inactive
toactive
, the animation starts immediately since no transition is required (the first keyframe of the animation is 0opacity
, the same asinactive
).
CtrlAltDeplete is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.