Css3比例動畫不起作用

Question

這是我的css，

div {
    background-image: url(some url);
    width:100px;
    height:100px;
    background-size:cover;
}

.animate {
    animation:changeSize 3s 1;
}
@keyframes changeSize {
    0% {transform: scale(1);}
    65% {transform: scale(1.2);}
    100% {transform: scale(1.4);}
}

使用Jquery點擊按鈕時，我只是將類animate轉換為div。 但它似乎不起作用。 我是css3動畫的新手，我不知道如何調試它。 在這種情況下，任何線索對我都有幫助。

DEMO

Answer 1

嗨，它只在firefox上工作正常，你必須添加webkit瀏覽器的供應商前綴

@-webkit-keyframes

這里是

@keyframes changeSize {
    0% {transform: scale(1);}
    65% {transform: scale(1.2);}
    100% {transform: scale(1.4);}
}
@-webkit-keyframes changeSize {
    0% {transform: scale(1);}
    65% {transform: scale(1.2);}
    100% {transform: scale(1.4);}
}

檢查小提琴小提琴

並添加轉換到您需要的div。

Answer 2

您可以使用css3動畫填充屬性

.animate {
    animation:changeSize 3s 1 forwards;
}

請找到jsfiddle鏈接http://jsfiddle.net/FLG4D/16/

在這里我也玩過“反復無常”的課程，所以切換回來也會很順利

類似的問題無法阻止css動畫在最后一個關鍵幀后消失

希望能幫助到你！