<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation delay ball move</title>
<style>
.ball {
--delay: 0s;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: green;
margin: 0 0 50px 0;
animation: move 1s linear var(--delay) forwards paused;
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
/* animation-fill-mode: forwards; */
/* animation-play-state: paused; */
}
@keyframes move {
100% {
transform: translateX(200px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="ball"></div>
<input type="range" name="" id="" min="0" max="1" step="0.01">
</div>
<!-- -->
<script>
const inp = document.querySelector('input')
const ball = document.querySelector('.ball')
const call = () => {
ball.style.setProperty('--delay', `-${inp.value}s`)
}
inp.oninput = function () {
call()
console.log('rang-', inp.value);
}
call()
</script>
</body>
</html>
