在特定的關鍵幀

Question

開始CSS動畫效果的價值我有我要動畫height 0的塊，然後width爲0。有沒有辦法做到這一點與CSS動畫？

美中不足的是，我不知道該塊的起始高度/寬度是什麼，所以使用

@keyframes shrink { 
    50% { height: 0; width: <UNKNOWN>; } 
    100% { width: 0 } 
} 

不起作用。

我要去的效果是這樣的（使用jQuery）：http://jsfiddle.net/andrewburgess/LFjEv/

Answer 1

更新到居然受理了

你可以延遲動畫的答案。你只需要通過JS設置類。 可悲的是這不能用關鍵幀動畫做，如果寬度是動態

---

http://jsfiddle.net/LFjEv/4/

CSS

.block, .other-block { 
    background-color: red; 
    display: inline-block; 
    height: 200px; 
    vertical-align: middle; 
    width: 200px; 
} 
.block { 
    -webkit-transition-property: height, width; 
    -webkit-transition-delay: 0ms, 500ms; 
    -webkit-transition-duration:500ms; 
    -moz-transition-property: height, width; 
    -moz-transition-delay: 0ms, 500ms; 
    -moz-transition-duration:500ms; 
    transition-property: height, width; 
    transition-delay: 0ms, 500ms; 
    transition-duration:500ms; 
} 
.block.shrink { 
    height: 0; 
    width: 0; 
} 
.other-block { 
    background-color: yellow; 
} 

JS

setTimeout(function() { 
    $('.block').addClass('shrink'); 
}, 0);