<div id="target"></div>
<div class="warning">
	<p>⚠️ Your browser does not support <a href="https://web.dev/css-individual-transform-properties/">Individual CSS Transform Properties</a> so this demo won't work.<br />Please use Chrome 104, Firefox 72, or Safari 14.1</p>
</div>

<button>Restart Animation</button>

@keyframes combined {
	0% { translate: 0% 0; }
	100% { translate: 100% 0; }

	0%, 100% { scale: 1; }
	5%, 95% { scale: 1.2; }

	0% { rotate: 0deg; }
	10%, 90% { rotate: 180deg; }
	100% { rotate: 360deg; }
}

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

body {
	display: grid;
	place-items: center;
	padding: 1em;
}

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

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


/** show a warning in browers that don't support it **/
.warning {
	padding: 1em;
	border: 1px solid #ccc;
	max-width: 100%;
}
.warning p {
	margin: 0;
	padding: 0;
	text-align: center;
}
@supports (scale: 1) {
	.warning {
		display: none;
	}
}

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