这是使用javascript的解决方案：
var imgs = document.querySelectorAll('.pic');for (var i = 0; i < imgs.length; i++) { imgs[i].onclick = toggleAnimation; imgs[i].style.webkitAnimationPlayState = 'running';}function toggleAnimation() { var style; for (var i = 0; i < imgs.length; i++) { style = imgs[i].style; if (style.webkitAnimationPlayState === 'running') { style.webkitAnimationPlayState = 'paused'; document.body.className = 'paused'; } else { style.webkitAnimationPlayState = 'running'; document.body.className = ''; } }}.pic { position: absolute; opacity: 0;}#pic1 { -webkit-animation: pic1 4s infinite linear;}#pic2 { -webkit-animation: pic2 4s infinite linear;}@-webkit-keyframes pic1 { 0% { opacity: 0; } 5% { opacity: 1; } 45% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; }}@-webkit-keyframes pic2 { 0% { opacity: 0; } 50% { opacity: 0; } 55% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; }}.paused { background-color: #ddd;}<img id="pic1" src="http://placehold.it/200x200/ff0000/ffffff"><img id="pic2" src="http://placehold.it/200x200/ff00ff/ffffff">jQuery解决方案（更简短，更易读）：
var imgs = $('.pic'), playState = '-webkit-animation-play-state';imgs.click(function() { imgs.css(playState, function(i, v) { return v === 'paused' ? 'running' : 'paused'; }); $('body').toggleClass('paused', $(this).css(playState) === 'paused');});.pic { position: absolute; opacity: 0;}#pic1 { -webkit-animation: pic1 4s infinite linear;}#pic2 { -webkit-animation: pic2 4s infinite linear;}@-webkit-keyframes pic1 { 0% { opacity: 0; } 5% { opacity: 1; } 45% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; }}@-webkit-keyframes pic2 { 0% { opacity: 0; } 50% { opacity: 0; } 55% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; }}.paused { background-color: #ddd;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><img id="pic1" src="http://placehold.it/200x200/ff0000/ffffff"><img id="pic2" src="http://placehold.it/200x200/ff00ff/ffffff">
