Animation Syncing

Question

Hey, I'm having a lot of problem in syncing the animations ....
Can anyone suggest How to sync the animations given to *different block*??

For example that I've two <div> tags with classes named "one" and "two" .And I've designed animations for each class....
Now, I want that the animation of "one" should be followed by animation of "two"......but I don't know how to do that....

Please can anyone help me with this

Answer 1

hover on hour div and all three div animates
https://code.sololearn.com/Wc62JSyagtpf/?ref=app

Answer 2

~ is used for sibling selectors..
and # is used for id

Answer 3

you mean when the first animation stops then the other one starts..
it would be easier if you could add your code here...

Answer 4

In this code, I want to add an effect like when we hover the hour's circle , all the 3 circles rotate one after the other...like when hour's circle stops rotating the minutes circle should rotate and then the seconds circle
https://code.sololearn.com/W6drP2DrOQdU/?ref=app

Answer 5

we use these as selectors..
. is used to select the classes, and
# is used to select the unique id

Answer 6

@Sami Khan. Thanks...😊

Answer 7

Woah...that's what I wanted

Answer 8

Hey, can u explain the use of # before className during hover and...."~" symbol

Answer 9

So, while giving effects to an id we should use # before it's name , same as when we define an id.