这是使用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" class="pic" src="http://placehold.it/200x200/ff0000/ffffff">
<img id="pic2" class="pic" 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" class="pic" src="http://placehold.it/200x200/ff0000/ffffff">
<img id="pic2" class="pic" src="http://placehold.it/200x200/ff00ff/ffffff">
602392714
清零编程群