<i style="--x:300px;--y:200px;"></i>
<div class="panel">
<div>Duration of d: <input type="range" min="0" max="4" step="0.2" value="4" name="D"></div>
<div>Duration of a: <input type="range" min="0" max="4" step="0.2" value="1.5" name="A"></div>
</div>
<div class="debug"></div>
<button> Run the animation </button>
@property --a1 {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
@property --d1 {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}
i{
position:fixed;
z-index:2;
width:50px;
height:50px;
border-radius:50%;
background:radial-gradient(at 30% 30%,#0000,#000a) red;
left:var(--x);
top: var(--y);
transform:rotate(var(--a1)) translate(var(--d1));
}
i.start {
animation: a var(--a,1.5s),d var(--d,4s);
animation-timing-function:linear, cubic-bezier(.5,-900,.5,900);
animation-iteration-count:infinite;
}
@keyframes a { to { --a1:360deg; } }
@keyframes d { to { --d1:0.5px } }
/**/
d {position:fixed;height:4px;width:4px;background:#222;border-radius:50%}
button {border:none;border-radius:10px;padding:10px 20px;cursor:pointer;position:fixed;bottom:20px;right:20px;font-family:sans-serif;font-size:30px;background:#c82629;color:#fff;}
.panel {position: fixed;top: 20px;right: 20px;padding: 10px;border: 1px solid;border-radius: 10px;background: #0001;font-family: sans-serif;}
.panel > div:not(:last-child) {border-bottom: 1px solid;padding-bottom: 10px;margin-bottom: 10px;}
let elem = document.querySelector('i');
let start;
function debug(timestamp) {
if (start === undefined)
start = timestamp;
const elapsed = timestamp - start;
let rect = elem.getBoundingClientRect();
document.querySelector('.debug').insertAdjacentHTML("afterbegin",'<d style="top:'+(rect.y + rect.height/2)+'px;left:'+(rect.x + rect.width/2)+'px;"></d>')
if (elapsed < 30000) {
window.requestAnimationFrame(debug);
}
}
function clear() {
document.querySelector('.debug').innerHTML=" ";
start=undefined;
window.requestAnimationFrame(debug);
}
document.querySelector('[name=D]').addEventListener('change', function() {
elem.style.setProperty("--d", this.value+"s");
clear()
});
document.querySelector('[name=A]').addEventListener('change', function() {
elem.style.setProperty("--a", this.value+"s");
clear()
});
document.querySelector("button").addEventListener("click",function() {
elem.classList.add("start");
window.requestAnimationFrame(debug);
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.