Smooth & Sexy Page-load CSS3 Animations

a.k.a. Delaying a CSS3 Animation

I've always been impressed with some of the subtle animations seen on apple.com product pages. It usually starts with an animation that plays upon page load where an element is introduced on the page by slide/fade in. It's so subtle, yet so satisfying to a user.

This sleek and subtle effect is being used on Livefyre's newly redesigned website. (http://livefyre.com)

Recently, I discovered some problems in adding that simple touch of animation without it being choppy and thus breaking that elegant experience.

The problem with having an animation play when a page loads, is that many resources including images and scripts that manipulate the DOM cause the browser to repaint/relayout. This contends with browser resources when attempting to play the animation, causing dropped frames.

One workaround to this is to delay the start of the animation to allow the page to be drawn before playing the animation.

Often when introducing/showing an element on the page, the element is hidden (opacity: 0), and over time gains full opacity.

While there is the 'delay' parameter for the animation attribute, specifying a time for this parameter will display the element in its final frame for the length of the specified delay. Then it will hide the element, and animate into full opacity. This is an undesired effect. We don't want to see that last keyframe during the delay period.

To avoid seeing the element during the delay period, follow these steps:

1) Create a div in our html that we want to animate
2) Create keyframes in our css file (these basically will define how things change, in this case from opacity 0 to opacity 100 )

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

3) Create div tag in our css, define our animation (duration, start delay etc) and link it to our keyframes

.fade-in {
    opacity:0;  /* make things invisible upon start */
    animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */

    animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/

    animation-duration:1s;
    animation-delay: 1.5s
}

The key is using:

animation-fill-mode:forwards

In conjunction with :

opacity: 0

This hides the element (opacity: 0) we want to animate-in for the specified delay, and forces the animation to stop on the last keyframe (opacity: 1).

Here's a detailed run down: http://www.graphicfusiondesign.com/blog/design/creating-fancy-css3-fade-in-animations-on-page-load/