Skip to content

Instantly share code, notes, and snippets.

@uupaa

uupaa/spin.animation.html

Created January 14, 2016 15:45
Show Gist options
  • Save uupaa/f8d0f7a24a992023e3a1 to your computer and use it in GitHub Desktop.
Save uupaa/f8d0f7a24a992023e3a1 to your computer and use it in GitHub Desktop.
Download ZIP
回転アニメーション spin animation CSS
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment