<div></div>

<button>重新运行动画</button>

@keyframes anim {
	0% { transform: translateX(0%); }
	5% { transform: translateX(5%) rotate(90deg) scale(1.2); }
	10% { transform: translateX(10%) rotate(180deg) scale(1.2); }
	90% { transform: translateX(90%) rotate(180deg) scale(1.2); }
	95% { transform: translateX(95%) rotate(270deg) scale(1.2); }
	100% { transform: translateX(100%) rotate(360deg); }
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: #fff;
}

body {
	display: grid;
	place-content: center;
}

div {
	width: 10vw;
	aspect-ratio: 1;
	background: red;
	border-radius: 1vw;
    animation: anim 2s;
	animation-fill-mode: forwards;
}

button {
	position: fixed;
	right: 1em;
	top: 1em;
}

document.querySelector("button").addEventListener("click", (e) => {
	document.querySelector("div").getAnimations().forEach((anim) => {
		anim.cancel();
		anim.play();
	});
});