Cada vez que voy a la sección, la pelota cae en el bote. ¿Cómo puedo hacerlo con javascript? La animación no se animará continuamente. Siempre que vaya a la sección, la bola caerá en el bote.
La captura de pantalla de demostración de diseño aquí
* { margin: 0; padding: 0; box-sizing: border-box; } header, footer{ height: 100vh; display: flex; justify-content: center; align-items: center; } header h1 { font-size: 50px; } .animation{ height: 100vh; background: rgb(29, 81, 85); background-repeat: no-repeat; background-position: center; position: relative; } .single_khejur{ position: absolute; top: 30%; /*30%*/ left: 22%; } .pot-image{ position: absolute; top: 68%; left: 20%; } .single_khejur{ animation: myfirst 5s; animation-direction: normal; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple javascript</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"> </head> <body> <header> <h1>FIRST SECTION</h1> </header> <div class="animation"> <div class="col-6 khejur-img"> <div class="single_tree"></div><img src="https://pngimg.com/uploads/palm_tree/palm_tree_PNG93333.png" ></div> <div class="single_khejur" id="single_khejur"><img src="https://www.pngall.com/wp-content/uploads/5/Sports-Ball-Transparent.png" height="20px"></div> <div class="single_top"><img class="pot-image" src="https://purepng.com/public/uploads/large/purepng.com-flower-potobjectsplantflowergardeningflower-potclaypotplantingterracotta-911524569335c5oyi.png" height="50px"></div> </div> <div class="col-6"> <img src="" ></div> </div> <footer> <h1>THIRD SECTION</h1> </footer> </body> </html>Quiero hacer esta animación con javascript o jquery. Cada vez que voy a la sección, la pelota cae en el bote.