[Animation applied to class list not effecting all elements in list]

Oh that makes sense, thank you that helps. Also those colors with the mix-blend-mode are beautiful

[Animation applied to class list not effecting all elements in list]

I'm getting the issue in both safari and chrome, here's what it looks like

[Animation applied to class list not effecting all elements in list]

I am trying to apply and animation to each 'pedal' in a flower bloom animation that I am trying to make. I'm using .from('.pedal') to apply x: 0, y: 0, scale: .5, and opacity: 0 to each pedal, but for whatever reason it does not apply these effects to the first and third element. If I remove all the elements and just apply the animation to either the first or third element it works fine. it's only when it's in a list of all 8 elements does it not work. Does anyone understand what's happening? I've posted a codepen with the code.

See the Pen LYEdmdw by chrisjol (@chrisjol) on CodePen