css - 在特定关键帧开始动画 CSS 值

Question

我有一个 block ，我想将 height 动画化为 0，然后将 width 动画化为 0。有没有办法用 CSS 动画来做到这一点？

问题是我不知道 block 的起始高度/宽度是多少，所以使用

@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);