Como pausar e retomar a animação CSS3 usando JavaScript?

Question

Apr 27, 2011, 02:54 PM

Como pausar e retomar a animação CSS3 usando JavaScript?

Eu tentei pesquisar no google e procurar neste fórum uma solução para o meu problema, mas sem sorte até agora. Gostaria de pausar minha animação CSS3 (apresentação de slides de imagens) clicando em uma imagem e também retomar a mesma animação clicando em uma image

Sei como pausar a apresentação de slides e também consegui retomar uma vez, mas ela pára de funcionar se tentar pausar e retomar mais de uma vez. Aqui está como meu código se parece:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.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;}
}
</style>
<script type="text/javascript">
function doStuff(){
    var pic1 = document.getElementById("pic1");
    var pic2 = document.getElementById("pic2");

    pic1.style.webkitAnimationPlayState="paused";
    pic2.style.webkitAnimationPlayState="paused";

    pic1.onclick = function(){
        pic1.style.webkitAnimationPlayState="running";
        pic2.style.webkitAnimationPlayState="running";
    }

    pic2.onclick = function(){
        pic1.style.webkitAnimationPlayState="running";
        pic2.style.webkitAnimationPlayState="running";
    }
}
</script>
</head>  
<body>
    <img id="pic1" class="pic" src="photo1.jpg" />
    <img id="pic2" class="pic" src="photo2.jpg" onclick="doStuff()" />
</body>                                                                 
</html>

Não quero usar nenhuma biblioteca JS (por exemplo, jQuery) ou qualquer outra solução extern

Meu palpite é que minhas funções dentro dedoStuff função @ ainda está em execução e é por isso quepause eresume funciona apenas uma vez.

Existe uma maneira de limpar essas funções depois de clicar nelas uma vez? Ou estou tentando fazer isso de uma maneira totalmente errada? A ajuda é apreciada. :)