Rotation issue on my coding

Question

My first coding for box rotaion and second for circle but when i apply second code then both animation going same. Befor use second code my first code is square raotation animation....
https://code.sololearn.com/W3FYJkJQiLqs/?ref=app

Answer 1

Correction :
https://code.sololearn.com/WT8isVr2K8AZ/?ref=app
Explanation :
Don't use same id twice (HTML line 39, CSS line 5)
Use different class names (HTML line 41)
The sub with different animation are child of different class. (CSS line 15, CSS line 45)
(all line numbers are line numbers of my correction)

Answer 2

Of course your 2nd style for sub element gets applied to both.
If i add sub.three in place of css style for 2nd sub it shows a circle.
Minor issue: Your code was a bit confusing. Can you better separate the styles and comment your code so others do not have a hard time reading it? That can make a difference if people will, or will not read the code and (hopefully) answer...

Answer 3

Ys u r right how can seprate both sub

Answer 4

Thank now i am understand