uupaa/spin.animation.html

## spin.animation.html
<!DOCTYPE html><html><head><title></title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta charset="utf-8"></head><body>

<style>
@keyframes spin {
  to { transform: rotate(-10turn); }
}
#product-logo.spin {
  animation: spin 500ms cubic-bezier(1, 0, 0, 1) forwards;
}
</style>
<img id="product-logo" src="logo.png" class="spin" />

<script>
var logo = document.querySelector("#product-logo");

logo.onclick = function(event) {
  logo.classList.remove("spin");
  setTimeout(function() { logo.classList.add("spin"); }, 0);
};
</script>
</body></html>
	<!DOCTYPE html><html><head><title></title>
	<meta name="viewport" content="width=device-width, user-scalable=no">
	<meta charset="utf-8"></head><body>

	<style>
	@keyframes spin {
	to { transform: rotate(-10turn); }
	}
	#product-logo.spin {
	animation: spin 500ms cubic-bezier(1, 0, 0, 1) forwards;
	}
	</style>
	<img id="product-logo" src="logo.png" class="spin" />

	<script>
	var logo = document.querySelector("#product-logo");

	logo.onclick = function(event) {
	logo.classList.remove("spin");
	setTimeout(function() { logo.classList.add("spin"); }, 0);
	};
	</script>
	</body></html>