CSS3 ONLY Transition with a push effect?

Question

Unfortunately I can not comment for lack of reputation, so I'll pose a new question based on another question *

This question was answered perfectly: css3 transition animation on load?

What I would like to know is how to make the header "push" a following div as it transitions instead of automatically taking up the space. I've added a delay necessary for my needs.

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>

Basically, the div with the page content should be at the top, then pushed down to make space for the header when it animates in. I'm sure it's simple, I just can't seem to nail it down.

Always appreciated!

score 0 · Accepted Answer · answered May 09 '16 at 15:06

Just apply the same animation and animation properties to the div as well.

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

Thanks! What I'm trying to accomplish is a CSS ONLY ad panel, that animates open after 2 seconds and can be closed via button click, having the content return to the top. I'm noticing now that I may need help with other elements to make this happen. I can set the animation to reverse and disappear the header. Where should I post this so I don't make people angry? :P — thatguy, May 09 '16 at 15:28
How do you intend to handle the button click without JavaScript? By using a checkbox masked by an associated label, and then style the label as a button? I mean, that will work but you'll need to use adjacent sibling selectors as well in order to create an event state with CSS only. For incremental questions, it might be best to pose them in one of the chat rooms like [HTML/CSS/Web Design](http://chat.stackoverflow.com/rooms/29074/html-css-webdesign). — AM Douglas, May 09 '16 at 15:33
Thanks a bunch! I'll try that :) I'd give it an upvote, but... the rep :( — thatguy, May 09 '16 at 18:01

CSS3 ONLY Transition with a push effect?

1 Answers1