CSS3 仅具有推送效果的过渡？

Question

不幸的是，由于缺乏声誉，我无法发表评论，所以我将根据另一个问题提出一个新问题 *

本题完美回答：css3 transition animation on load?

我想知道的是如何在 header "push" 转换时跟随 div 而不是自动占用 space。我添加了满足我需要的延迟。

CSS:

header {    
background: #3d3d3d;
color: #fff;
min-height: 0;
max-height:auto;
position: relative;
padding: 30px;

-moz-animation-name: dropSection;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 1.6s;
-moz-animation-delay: 2s;

-webkit-animation-name: dropSection;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 1.6s;
-webkit-animation-delay: 2s;

animation-name: dropSection;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 1.6s;
animation-delay: 2s;
}
.panel-content{
}

@-moz-keyframes dropSection {
    0% {
        -moz-transform: translateY(-100%);
    }
    100% {
        -moz-transform: translateY(0);
    }
}
@-webkit-keyframes dropSection {
    0% {
        -webkit-transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}
@keyframes dropSection {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

HTML:

    <header>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.</p>

        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    </header>
    <div class="panel-content">
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.</p>

        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    </div>

基本上，带有页面内容的 div 应该在顶部，然后向下推以在动画显示时为 header 制作 space。我确定它是很简单，我似乎无法确定。

一直很感激！

Answer 1

只需将相同的动画和动画属性也应用到 div。

header {    
background: #3d3d3d;
color: #fff;
min-height: 0;
max-height:auto;
position: relative;
padding: 30px;
animation-name: dropSection;
animation-iteration-count: 1;
animation-direction: forwards;
animation-timing-function: ease-out;
animation-duration: 1.6s;
animation-delay: 2s
}

.panel-content {
animation-name: dropSection;
animation-iteration-count: 1;
animation-direction: forwards;
animation-timing-function: ease-out;
animation-duration: 1.6s;
animation-delay: 2s
}

@keyframes dropSection {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<header>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.</p>

        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    </header>
    <div class="panel-content">
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at lobortis.</p>

        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur. Donec sed odio dui. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    </div>
</body>
</html>

https://jsbin.com/gazuxuy/edit?html,css,output

CSS3 仅具有推送效果的过渡？

CSS3 ONLY Transition with a push effect?

css

transition

push

transform