CSS3動畫在AddClass不是頁面加載

Question

我希望我的關鍵幀動畫，當我彈出窗口的.show類通過JS添加時，激活。但是，僅在頁面加載時激活動畫。

這裏是我有的JS代碼。

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#showSimpleModal").click(function() { 
     $("div#simpleModal").addClass("show"); 
     return false; 
    }); 

    $("#closemodal").click(function() { 
     $("div#simpleModal").removeClass("show"); 
     return false; 
    }); 
}); 
</script> 

我的CSS

@-webkit-keyframes editwindow { 
    0% { -webkit-transform: scale3d(2.5, 2.5, 1); opacity: 0; } 
    100% { -webkit-transform: scale3d(1, 1, 1) } 
} 

div#simpleModal { 
    position: absolute; 
    top:25%; 
    left:25%; 
    width: 560px; 
    padding: 2px; 
    background: #495263; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    border: solid 1px #2b323a; 
    -moz-box-shadow: 0 0 35px rgba(0, 0, 0, 1), 0 1px rgba(255, 255, 255, .15) inset; 
    -webkit-box-shadow: 0 0 35px rgba(0, 0, 0, 1), 0 1px rgba(255, 255, 255, .15) inset; 
    box-shadow: 0 0 35px rgba(0, 0, 0, 1), 0 1px rgba(255, 255, 255, .15) inset; 
    opacity: 0; 
    z-index: 0; 
} 
div#simpleModal.show { 
    opacity: 1.0; 
    z-index: 100; 
    -webkit-animation-name: editwindow; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-animation-duration: 400ms; 
    -moz-animation-name: pop; 
    -moz-animation-timing-function: ease-in-out; 
} 

我怎樣才能讓這樣的動畫獲取具有激活添加的表演類時。

Answer 1

這似乎是工作，你寫的：http://jsfiddle.net/pa9SN/1/