Question

我有一个块我希望将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);

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

1 个答案: