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

Question

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

<script src="jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/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);} 
} 

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

Answer 1

Кажется, это проблема в том, что, когда вы нажали второй раз свойства css, уже установленные для этих значений, первым щелчком мыши и это означает, что вам нечего делать. Попытайтесь очистить (установите значения по умолчанию css, такие как свойства «none» или «auto»), и снова установите каждый клик.

пс. используйте кросс-браузер css, а не только mozilla, он будет проще помочь вам другим людям. -webkit-, -o-, -moz-, -ms- все префиксы AFAIK