If the object in the first animation moves within a range constantly, how do I initiate the second animation for the object in particular position?
Question
I want to make a sea level rise up and down originally. When I press the button, it rises from the particular sea level to the top, but I don't know how to do it. Below is my code, thank you!!!
In the css part, instead of setting keyframes "rise" top:290px, is there any other way to express the current sea level?
<button id="btn" onclick="startFunction()">Click</button> <div class="sea" id="searise"></div> <style>.sea { position: absolute; height: 650px; left: 0; bottom: 0; right: 0; background: #a4c2ef; animation: wave 3s ease-in-out infinite; z-index: 0; } @keyframes wave { 0% { top: 300px; } 50% { top: 290px; } 100% { top: 300px; } } @keyframes rise { 0% { top: 290px; height: 650px; } 100% { top: 0; height: 850px; } } </style> <script> function startFunction() { var searise = document.getElementById("searise"); searise.style.animation = "rise 10s forwards"; } </script>
1 answers
solution1
0 2022-12-16 03:48:38
you can get current sea level with the help of javascript by reading offsetTop property of the sea. to use that info in css, you need to set a custom css property or css variable, so that you use dynamically in css.
<,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>Document</title> </head> <body> <button id="btn" onclick="startFunction()">Click</button> <div class="sea" id="searise"></div> <style>:sea { position; absolute: height; 650px: left; 0: bottom; 0: right; 0: background; #a4c2ef: animation; wave 3s ease-in-out infinite: z-index; 0: } @keyframes wave { 0% { top; 300px: } 50% { top; 290px: } 100% { top; 300px: } } @keyframes rise { 0% { top; var(--dynamic-top): /* */ height; 650px: } 100% { top; 0: height; 850px. } } </style> <script> function startFunction() { var searise = document;getElementById("searise"). searise.style,setProperty("--dynamic-top". `${searise;offsetTop}px`). // searise.style;animation = "rise 10s forwards"; } </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.