Search code examples
animationcsspageload

how does this website do the page load animation?

http://visualidiot.com/articles/hacking-facebook

Going to any article on this website, you'll see that the main body of the page does an animation where it slides down, then up a little. The main body of the page animates, the header doesn't. When i've previously seen page load animations, they've been plagued with bugs, messing up when hitting the back button and going back to the page.

How exactly does this guy do that animation?

Solution

  • I'm Visual Idiot, the guy who made, well, my site.

    Basically, as Seth's said, it's all in the animations.css, and, more specifically, it uses keyframe animations to get things done:

    @-webkit-keyframes bounce {
    0% { opacity: 0; -webkit-transform: translateY(-800px); }
    60% { opacity: 1; -webkit-transform: translateY(25px); }
    80% { -webkit-transform: translateY(-8px); opacity: .8; }
    100% { -webkit-transform: translateY(0); opacity: 1; }
}

    This defines an animation, which can then be used like so:

    .bounce {
    -webkit-animation: bounce .75s ease-in-out;
}

    Now, whenever anything has a class of "bounce" added to it, it'll do that cute little effect pages have on my site. One thing to note, though: it seems to work better if you add the class via Javascript (on longer pages only, though), since it sometimes runs the animations before the DOM is ready,

    If you want to learn more about keyframe animations in CSS, I suggest you check out Dan Eden's amazing animate.css library. I learnt a lot from pulling apart the source files.