CODEWITHSUNDEEP
css
user3464627
user3464627

Reputation: 55

Delayed slide after page load using CSS

I have a header inside of a DIV and I would like to add in a transition so it slides into view a couple of seconds after the pages loads.

Is this possible using CSS alone? I understand how transitions and transform works but they load in immediately and that isn't what I want.

Upvotes: 1

Views: 917

Answers (1)

SW4
SW4

Reputation: 71230

In order for this to work, you'll need to place the CSS at the bottom of your Body content, to ensure the DOM has rendered as well as any other CSS/scripts run (e.g. the page has loaded). That said, the better way would be to listen to the document load event in Javascript, and apply a transitioning class at that point, as noted by Josiah in the comment to your question.

Demo Fiddle

HTML

<div id="slidingContent"></div>

CSS

html,body{
    padding:0;
    margin:0;
}
#slidingContent {
    height: 100px;
    width: 100%;
    margin-top: -120px;
    color: red;
    background-color: grey;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.3s;    
    -webkit-animation-delay: 2s;
    -webkit-animation-fill-mode:forwards;   
    animation-name: slideIn;
    animation-duration: 0.3s;    
    animation-delay: 2s;
    animation-fill-mode:forwards;        
}
@-webkit-keyframes slideIn {
    0%   { margin-top: -120px;   }
    100% { margin-top: 0px;  }
}
@keyframes slideIn {
    0%   { margin-top: -120px;   }
    100% { margin-top: 0px;  }
}

Upvotes: 3

Related Questions