Explain Css animation behavior?

Here's a simple example which demonstrates the behavior of the opacity property of a fading text with an infinite animation https://jsfiddle.net/kc7t62ge/.
Setting the opacity programmatically (by clicking the button LOL) does not interrupt the animation, which makes sense. However, the opacity now alternates between 0 and the new set value, in my example 0.3. Why is that? Is there a hidden property behind the css animation being set, aka max-opacity of some sort?

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Ἔ

ἔρως•5/6/24, 12:42 AM

basically, your animation is going from 0 to whatever value was set before the animation

Ἔ

ἔρως•5/6/24, 12:43 AM

since you changed the value from 1 to 0.3, it will animate from 0 to 0.3

SilvershotOP•5/6/24, 1:47 AM

well, if what you say is true, then current iteration should complete with the old value 1, but when the text appears again, i press the button and i change the opacity to 0.3, which immediately depicts the update, since the txt does not go to opacity 1.

SilvershotOP•5/6/24, 1:47 AM

so if the animation has yet to complete its current loop, the property should not be affected

Ἔ

ἔρως•5/6/24, 7:40 AM

the animated value is re-calculated every frame

Ἔ

ἔρως•5/6/24, 7:40 AM

if you change it roughly in the middle of the animation, you see a huge change on the opacity

Ἔἔρως the animated value is re-calculated every frame

SilvershotOP•5/6/24, 6:09 PM

ok, so it is pretty much instant. does this apply to every css property?

Ἔ

ἔρως•5/6/24, 6:10 PM

depends

Ἔ

ἔρως•5/6/24, 6:10 PM

there's non-animatable properties, there's animatable properties that simply change from state to state and there's animatable ones that can be interpolated

Ἔ

ἔρως•5/6/24, 6:13 PM

https://developer.mozilla.org/en-US/docs/Web/CSS/display#formal_definition <-- for example, the is "discretely" animatable
it goes from to and there's no in-between

Ἔ

ἔρως•5/6/24, 6:14 PM

https://developer.mozilla.org/en-US/docs/Web/CSS/color#formal_definition <-- the color, for example, will smoothly change between the start and end color

Ἔἔρως there's non-animatable properties, there's animatable properties that simply cha...

curiousmissfox•5/7/24, 12:09 AM

What does interpolated mean ? Is that like for discrete properties like ?

Ἔ

ἔρως•5/7/24, 9:44 AM

well, i don't know if "interpolate" is the right word

Ἔ

ἔρως•5/7/24, 9:44 AM

maybe "computed" is a better word

Jochem•5/7/24, 9:46 AM

interpolate is the right word I think

Jochem•5/7/24, 9:47 AM

in this case, it's referring to the slow shift from one state to the next, so opacity getting interpolated over time means it fades in or out, an x-position being interpolated means it slides left or right

Jochem•5/7/24, 9:47 AM

interpolation means taking a start and an end value, and calculating one or more in between states

Ἔ

ἔρως•5/7/24, 8:43 PM

i guess it is the right term

JJochem interpolation means taking a start and an end value, and calculating one or more...

curiousmissfox•5/8/24, 3:01 AM

So could 'transitioning' be a synonym for 'interpolating'?

Ἔ

ἔρως•5/8/24, 3:10 PM

no, as "transitioning" is the act of calculating the interpulated states between the start and end state, and gradually changing the current state

Ἔ

ἔρως•5/8/24, 3:12 PM

if you want to go smoothly from 0 to 1 opacity, you calculate the next state between 0 and 1 based on the duration of the transition and how long has past, and use that as the current state

Ἔ

ἔρως•5/8/24, 3:13 PM

if you want to interpulate a state between 0 and 1, you just calculate the value that represents a bit of both 0 and 1 - in this case, 0.5

Ἔἔρως if you want to interpulate a state between 0 and 1, you just calculate the value...

curiousmissfox•5/8/24, 9:03 PM

Jocham said it could be one or more in-between states though so could be 0.25, 0.5, and 0.75 when interpolating between 0 and 1?

Ἔ

ἔρως•5/8/24, 9:36 PM

interpolation means taking a start and an end value, and calculating one or more in between states

this is an important key point. you can calculate multiple values.

if you want to go smoothly from 0 to 1 opacity, you calculate the next state between 0 and 1 based on the duration of the transition and how long has past, and use that as the current state

this is an important point of transitioning: you only calculate 1 state at a time, and it's based on the duration and how long has past since the transition started, but it's always just 1 state.

if you want to transition between 0 and 1 in 5 seconds, at 2.5s it will be at 0.5, and at 1s will be at 0.2.

when you interpolate, you calculate a value with characteristics of the initial and final values.
if you want to get 2 interpolated states, you get 0, 0.333...., 0.666... and 1. (0.999.... is 1, and there's mathematical proof of it)
if you want to interpolate 3 states, you get 0, 0.25, 0.5, 0.75, 1.

transitions have a temporal component: everything happens based on time, and you can calculate back and forth
interpolation just gives you the intermediary states: and that's it.

Jochem•5/8/24, 9:38 PM

we're honestly arguing pointless semantics here

Jochem•5/8/24, 9:39 PM

if you want, define a transitional state as any of the interpolations in a sequence, but almost no one uses those terms accurately or with too much care

Ἔ

ἔρως•5/8/24, 9:41 PM

i agree

Ἔ

ἔρως•5/8/24, 9:41 PM

generally, nobody cares