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.
15 Replies
basically, your animation is going from 0 to whatever value was set before the animation
since you changed the value from 1 to 0.3, it will animate from 0 to 0.3
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.
so if the animation has yet to complete its current loop, the property should not be affected
the animated value is re-calculated every frame
if you change it roughly in the middle of the animation, you see a huge change on the opacity
ok, so it is pretty much instant. does this apply to every css property?
depends
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
https://developer.mozilla.org/en-US/docs/Web/CSS/display#formal_definition <-- for example, the
display is "discretely" animatable
it goes from display: block to display: none and there's no in-between
https://developer.mozilla.org/en-US/docs/Web/CSS/color#formal_definition <-- the color, for example, will smoothly change between the start and end colorWhat does interpolated mean ? Is that like for discrete properties like
display?well, i don't know if "interpolate" is the right word
maybe "computed" is a better word
interpolate is the right word I think
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
interpolation means taking a start and an end value, and calculating one or more in between states
i guess it is the right term
So could 'transitioning' be a synonym for 'interpolating'?
no, as "transitioning" is the act of calculating the interpulated states between the start and end state, and gradually changing the current state
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
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
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?
interpolation means taking a start and an end value, and calculating one or more in between statesthis 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 statethis 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.
we're honestly arguing pointless semantics here
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
i agree
generally, nobody cares