miekd

An hour back, a new, minimal version of my personal website launched. Whilst creating it, I fondled around with WebKit transitions and animations. Now, as you might have seen, that site doesn’t come out guns blazing, and doesn’t drip WebKit animations out of it’s pores, but one of the tiny things I really liked was a subtle fade-in animation when the website opens.

In short, this is the way that cookie crumbles:

@-webkit-keyframes fade-in {
	0%   { opacity: 0; }
	50%   { opacity: 0; }
	100% { opacity: 1; }
}

body {
	-webkit-animation-name: fade-in;
	-webkit-animation-duration: 1.5s;
}

It’s not rocket science, as you can see. A few sidenotes:

• I chose the 0% – 50% – 100% approach so there is a 750ms period in which certain images can load. This makes for a better transition.
• Depending on the design, you would be better off adding the animation to a top-level container element (which is section.page on my website). This works best if you have a repeating background of some sort, because it adds to the smooth entrance.