При первом нажатии CSS3 работает, но при втором не работает, почему?

Я изучаю CSS3 (используя jQuery и CSS3). Если я нажму на класс CSS3, он работает, но второй щелчок не работает.

<script src="/jquery-1.9.1.js"></script>
<script src="/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/custom.css">

HTML:

div id="test"  class="animate">Try me</div>

<div class="fff" style="width:100px;height:100px;background:#4AB72F"><h3>click here</h3></div>

JQuery:

$(document).ready(function(){
    $(".fff").click(function(){
        $("#test,.animate").css({"transition":"all 10s",
                                 "-moz-animation-name":"test", 
                                 "-moz-animation-duration":"1s"});
    });
});

CSS:

#test {
    width:160px;
    height:200px;
    margin: 100px;
    background:#68C6F2; 
}
@keyframes test{
    from { -moz-transform: translateX(100%) scale(.1) rotateY(90deg);}
}

Что не так с этим кодом?