javascript - Is there a way to transition from the end state of a CSS animation using transitions? -

javascript - Is there a way to transition from the end state of a CSS animation using transitions? -

i understand , utilize both transitions , animations, seems me there bit of "hitch" when trying combine them. illustration if have animation style ends on color, , sets value indefinitely -webkit-animation-fill-mode: forwards; create lot of sense if smoothly transition state 1 if overriding style set.

see jsfiddle. note toggling yellowish style uses transition smoothly, utilize of animation can smooth initial 0-50% during animation. there no way recover final greenish state either plain white or yellowish background without abrupt instant alter occurs when animation value unset. note animation, when active, overrides !important style.

i don't know how much of behavior specified in spec/wd/etc., far i'm concerned type of limiting behavior makes css animations next worthless, , animation advisable perform step-wise javascript, used transitions. downside added overhead of doing way.

and address "unclear i'm asking" vote, i'm asking how can create animation can interpolate out of final animation state?

true, have tried utilize value reverse in animation-direction property animation?

javascript css css3 css-transitions css-animations