Question

我正在尝试创建一个在导航栏下方展开的div，在其展开时推送其下的主要内容。但是，由于某种原因，这不适用于关键帧，我无法通过转换来实现，因为它必须在页面加载时发生。

这是我得到的：

.c-lander {
    animation-name: c-lander-intro;
    animation-duration: 900ms;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

@keyframes c-lander-intro {
    0% {
        height: 0px;
    }
    100% {
        height: inherit;
    }
}

.c-lander {
    padding-top: 15px;
    padding-bottom: 30px;
    background: #01C9B6;
    overflow: hidden; 
}

<div class="c-lander">Here is some text that is very texty and is supposed to demonstrate and give this div a height. Here is some text that is very texty and is supposed to demonstrate and give this div a height. Here is some text that is very texty and is supposed to demonstrate and give this div a height. Here is some text that is very texty and is supposed to demonstrate and give this div a height. Here is some text that is very texty and is supposed to demonstrate and give this div a height. Here is some text that is very texty and is supposed to demonstrate and give this div a height </div>
Here is the content that gets pushed

正如你所看到的，div有一个2帧动画而不是平滑的60fps动画。这是怎么回事？

Answer 1

您无法将高度设置为auto（此inherit解析为什么）。另一种方法是使用设定值为max-height设置动画。

＆＃13;

.c-lander {
    animation-name: c-lander-intro;
    animation-duration: 900ms;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

@keyframes c-lander-intro {
    0% {
        max-height: 0px;
    }
    100% {
        max-height: 300px;
    }
}

.c-lander {
    padding-top: 15px;
    padding-bottom: 30px;
    background: #01C9B6;
    overflow: hidden; 
}

＆＃13;

<div class="c-lander">Here is some text that is very texty and is supposed to demonstrate and give this div a height. Here is some text that is very texty and is supposed to demonstrate and give this div a height. Here is some text that is very texty and is supposed to demonstrate and give this div a height. Here is some text that is very texty and is supposed to demonstrate and give this div a height. Here is some text that is very texty and is supposed to demonstrate and give this div a height. Here is some text that is very texty and is supposed to demonstrate and give this div a height </div>
Here is the content that gets pushed

＆＃13;

Answer 2

您必须提供一个动画单元，inherit无法正常工作：

@keyframes c-lander-intro {
    0% {
        height: 0px;
    }
    100% {
        height: 100px;
    }
}

JSFiddle

注意：您必须添加浏览器前缀才能在所有浏览器中使用

Answer 3

＆＃13;

.c-lander {
    animation-name: c-lander-intro;
    animation-duration: 900ms;
    animation-timing-function: ease-out;
    animation-iteration-count: 1;
}

@keyframes c-lander-intro {
    0% {
        height: 0px;
    }
    100% {
        height: 100px;
    }
}

.c-lander {
    padding-top: 15px;
    padding-bottom: 30px;
    background: #01C9B6;
    overflow: hidden; 
}

＆＃13;

<div class="c-lander">Here is some text that is very texty and is supposed to demonstrate and give this div a height. Here is some text that is very texty and is supposed to demonstrate and give this div a height. Here is some text that is very texty and is supposed to demonstrate and give this div a height. Here is some text that is very texty and is supposed to demonstrate and give this div a height. Here is some text that is very texty and is supposed to demonstrate and give this div a height. Here is some text that is very texty and is supposed to demonstrate and give this div a height </div>
Here is the content that gets pushed

＆＃13;

css动画不喜欢inheret。尝试使用固定高度。

动画div高度扩大波涛汹涌

3 个答案:

JSFiddle