I’m trying to understand CSS Animations, so I created a codepen to play around with it a little bit.
I created a bunch of shapes, mainly circles, and decided to try to animate all of them once the purple circle is hovered. I started with the yellow circle, however, I realized that I couldn’t seem to make it work. After some googling I found out that this is only possible in pure CSS if the elements are descendants or siblings to each other, which they are in my case, but I still couldn’t get it to work. To figure it out I decided to try and simply style the yellow circle with the sibling selector, but not even that is working. Any ideas as to why?
Thank you so much in advance!
Link to Codepen: https://codepen.io/Johju/pen/vwveNz
Browser: Firefox Quantum 67.9 (64-bit)
EDIT: Also just realized that styling the yellow circle works fine when I use any of the other classes, it’s just hover that breaks it. So confused.