I am trying to understand how can I replicate a CSS animation in d3.
Here is the notebook.
I have created a green circle and applied CSS animation and I have created another red circle where I want to achieve the same animation with d3.
I can’t seem to get it to work. I don’t seem to make the infinite iteration count the same way in d3 as in CSS. CSS seems to be more seamless than d3.
Are you looking at it in Chrome or Safari? In Chrome, it looks very smooth to me, but in Safari, the red circle is noticeably “steppy.”
I am using Chrome. But somehow, I feel I was not able to achieve the same effect with d3 as in CSS. CSS is extremely smooth.
To me, it looks like the timing is different. I’ve added a call to .ease(d3.easeCubicOut), which seems to make it more similar (I’ve forked your notebook and sent you a suggestion). But check out the d3.ease() documentation for some other options!
Can you please shed some light on how did you figure out that using .ease(d3.easeCubicOut) would make both the circles with the same effect?
I was guessing 
It seemed that the red circle had an initial delay. The default easing function is d3.easeCubic, which means it has a slow-in-slow-out kind of shape. To speed up the beginning, I picked cubicOut, which starts as a linear function and then rounds off towards the end. That seems to work, but now I wonder if the CSS default is simply linear. It’s hard to see the difference because the light colors at the end are harder to tell apart. If you slow it down you’ll see it though.
Understood. Thanks, yes corresponding timing should align them.
No, CSS default is cubic-bezier(0.25, 0.1, 0.25, 1.0)
I tried to look for it. Is there a documentation you can point me to for tge default easing in d3?
