web之利用延迟实现复杂动画、animation

---

效果图

---

html

<div class="container"><div class="ball"></div><input type="range" min="0" max="1" step="0.01" />
</div>

---

style

body {display: flex;justify-content: center;
}.container {margin-top: 30px;
}.ball {--delay: 0s;width: 50px;height: 50px;border-radius: 50%;background-color: #ff0000;margin-bottom: 50px;animation: move 1s var(--delay) linear forwards paused;/* animation-play-state: running; *//* animation-play-state: paused; */
}@keyframes move {50% {transform: translate(100px) scale(1.5);}100% {transform: translate(200px) scale(1);}
}

---

JavaScript

// js方式实现(不考虑此方案)
// let inp = document.querySelector('input');
// inp.oninput = function () {
//     console.log(inp.value);
// }// 方式二(配合css实现)
let inp = document.querySelector('input'),ball = document.querySelector('.ball'),cal = () => ball.style.setProperty('--delay', `-${inp.value}s`);inp.oninput = cal;
cal();