Repeat the animation on other sibling div's

[Mohamedgad]

Hello, I want to have the first div animation applied on other divs in the same container.

all divs have same classes and same content.

is there any way to repeat the animation for each div when mouse enter and mouse leave instead of rename all classes and duplicate the codes over and over.

 

thanks for helping. 

See the Pen MWpbYVa by Mohamed-Gad (@Mohamed-Gad) on CodePen

[OSUblake]

Sure. Here are some topics that might help you.

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

 

See the Pen 495ae1529d9ca33b8af0a2a039152738 by osublake (@osublake) on CodePen

 

 

[OSUblake]

Reusing an animation.

 

See the Pen 88ed0dca5b4eb6013e729cca45db37c0 by osublake (@osublake) on CodePen

 

[Mohamedgad]

Thank you for your quick response and help and also for the reference links.

   I Appreciate it.