爲什麼這個CSS3動畫會立即發生？

Question

我有這個CSS3動畫問題：

@-webkit-keyframes hide_card { 
    0% { 
    width: 250px; 
    margin-left: 10px; 
    margin-right: 10px; 
    border-width: 3px; 
    } 
    100% { 
    width: 0px; 
    margin-left: 0px; 
    margin-right: 0px; 
    border-width: 0px; 
    } 
} 

@-moz-keyframes hide_card { 
    0% { 
    width: 250px; 
    margin-left: 10px; 
    margin-right: 10px; 
    border-width: 3px; 
    } 
    100% { 
    width: 0px; 
    margin-left: 0px; 
    margin-right: 0px; 
    border-width: 0px; 
    } 
} 

@-ms-keyframes hide_card { 
    0% { 
    width: 250px; 
    margin-left: 10px; 
    margin-right: 10px; 
    border-width: 3px; 
    } 
    100% { 
    width: 0px; 
    margin-left: 0px; 
    margin-right: 0px; 
    border-width: 0px; 
    } 
} 

@keyframes hide_card { 
    0% { 
    width: 250px; 
    margin-left: 10px; 
    margin-right: 10px; 
    border-width: 3px; 
    } 
    100% { 
    width: 0px; 
    margin-left: 0px; 
    margin-right: 0px; 
    border-width: 0px; 
    } 
} 

這裏的元素：

.activity .card.invisible { 
    width: 0px; 
    border-width: 0px; 
    margin: 0px; 
    opacity: 0; 
    -webkit-animation-name: hide_card; 
    -moz-animation-name: hide_card; 
    animation-name: hide_card; 

    -webkit-animation-duration: 1s; 
    -moz-animation-duration: 1s; 
    animation-duration: 1s; 

    -webkit-animation-iteration-count: 1; 
    -moz-animation-iteration-count: 1; 
    animation-iteration-count: 1; 
} 

在我的JavaScript，我加入使用JQuery的invisible類，元素被隱藏起來（與這個類被添加到檢查器中），但它在沒有動畫的情況下立即執行。

任何幫助將不勝感激，我可以根據需要提供更多信息。

Answer 1

是的，您需要在卡片獲得.invisible類之前添加動畫規則。所以它會是這個樣子我想：

.activity .card { 
    transition: all 1s ease 1s; 
    width: 250px; 
    margin-left: 10px; 
    margin-right: 10px; 
    border-width: 3px; 
} 

.activity .card.invisible { 
    width: 0px; 
    border-width: 0px; 
    margin: 0px; 
    opacity: 0; 
} 

我用速記和省略供應商前綴...