Question

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

这个问题得到了很好的回答：css3 transition animation on load?

我想知道的是如何制作标题＆＃34; push＆＃34;一个跟随div，因为它转换而不是自动占用空间。我已经为我的需求增加了必要的延迟。

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应位于顶部，然后向下推，以便在动画进入时为标题腾出空间。我确信它很简单，我只能＆＃39;似乎把它钉死了。

永远赞赏！

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 ONLY具有推送效果的过渡？

1 个答案: