I am trying to currently achieve an animation as following
1)There are 4 elements in the canvas-
2) green square at (5,20) with a width 10 and height 10
3) 3 lines located respectively at (55,20), (80,20), (125,20).
4) the horizontal distance from the green square to each of these lines are respectively (50, 80,120)
I want to move the green square in the X Axis to 150px and I want each of the lines to rotate 7.5deg only when they get hit by the green square and not before that.
Please find below a representation of the CSS animation that I am trying to achieve
Animation. I am asking CSS to move the square to (5,20) to (150,20) in 4second with a rate of speed of cubic-bezier(0,0,0.58,1) and also rotating the lines.
When I analyse this I realize that in order for me to do that, I need to be able to calculate the t for any nth d in d=st equation. However, as an animation-timing function, to control the speed I have provided cubic-bezier(0,0,0.58,1) to control the speed at which the square move from (5,20) to (150,20).
Is there anyway for me to calculate with a known cubic-bezier value, what is the t for a given d ?
For example, in this case the total time =4s, with speed rate cubic-bezier(0,0,0.58,1) at what time the square from (5,20) respectively reaches (55,20), (80,20), (125,20)?
If I can determine that, I can pass on those individual values as the animation-delay for each of those line.