CSS动画不动画

Question

我想用menu slider做CSS animations。

我的动画作品，但它只是显示开始和结束状态，而不是逐步动画。

看看我做的钢笔(CSS有点搞砸了，但是有bug/错误)：点击这里取笔

感谢所有的帮助。

Answer 1

你可以这样做。

@keyframes openmenu {
    0%   {width: 0%;}
    100% {width: 100%;}
}

@keyframes closemenu {
    0% {width: 100%; }
    100% {width: 0%;}
}

PEN：http://codepen.io/anon/pen/xRJBJj

Answer 2

因为您不需要对动画的跨度进行精细的控制，所以您可以在这里使用转换，因为动画只会发生在起始点和结束点之间。

见笔这里

用下列样式替换您的类：

.open-menu {
    max-width: 400px;
    max-height: 400px;
    transition: all 2s ease;
}

.close-menu {
    max-width: 0;
    max-height: 0;
    transition: all 2s ease;
}

目前，我们只能在两个固定值之间进行转换或动画，所以这就是auto不能工作的原因。

因此，我们通常将max-height和max-width设置为宽度和高度永远达不到的值。