CSSアニメーションは
animation-play-state: paused;
で一時停止することができます。
animation-play-state: running;
でアニメーションします。
DEMO
クリックするとアニメーションが一時停止し、もう一度クリックすると再び動き出します。
内部的にはpauseクラスをtoggleさせているだけです。
HTML
<div id="panel">HELLO WORLD.</div>
CSS
#panel { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 300px; height: 300px; font: 25px AvenirNext-Heavy; line-height: 300px; text-align: center; background: rgba(0, 0, 0, .5); cursor: pointer; transition: opacity .1s ease-in-out; -webkit-animation: rotate 5s ease-in-out infinite alternate; animation: rotate 5s ease-in-out 2 alternate; &.pause { opacity: .5; -webkit-animation-play-state: paused; animation-play-state: paused; } } @-webkit-keyframes rotate { 0% { -webkit-transform: rotateY(0deg) scale(1); } 10% { -webkit-transform: rotateY(0deg) scale(1); } 20% { -webkit-transform: rotateY(0deg) scale(0.5); } 80% { -webkit-transform: rotateY(180deg) scale(0.5); } 90% { -webkit-transform: rotateY(180deg) scale(1); } 100% { -webkit-transform: rotateY(180deg) scale(1); } } @keyframes rotate { 0% { transform: rotateY(0deg) scale(1); } 10% { transform: rotateY(0deg) scale(1); } 20% { transform: rotateY(0deg) scale(0.5); } 80% { transform: rotateY(180deg) scale(0.5); } 90% { transform: rotateY(180deg) scale(1); } 100% { transform: rotateY(180deg) scale(1); } }
JavaScript
(function(win, doc) { "use strict"; doc.querySelector("#panel").addEventListener("click", function() { this.classList.toggle("pause"); }, false); })(this, document);