Full-page Animations Using CSS

Internet Explorer 9 introduced support for CSS 2D Transforms. Internet Explorer
10 Developer Preview added support for
CSS 3D Transforms and CSS Animations.
By tapping the power of your GPU and running asynchronously from regular JavaScript,
these IE10 features provide a more performant and flexible alternative to traditional
script-based animations for Web content.

In previous blog posts, we covered
CSS 3D Transforms as well as
CSS Animations and Transitions. In this post, we introduce a more “unconventional”
use case for these technologies by describing the concept of “full-page animations”
that can be used during the navigation process to add fluidity and continuity to
browsing. Our target is to achieve a seamless browsing experience in which content
smoothly appears into view when the user visits a page and transitions away when
he clicks on a link or performs a relevant action.

These effects can be accomplished by transforming the HTML <body>
element using CSS Animations. However, this use case presents some considerations
that we felt were worthy of discussion, such as the effect of layout and sizing
on transforming <body>, as well as how to appropriately time
page navigations so that they mesh properly with our animations.

The code samples in this post use unprefixed CSS markup as supported by IE10 Release
Preview; other browsers may require vendor prefixes for the CSS Animations and CSS
Transforms properties used.

Transforming a Page’s Entire Content

CSS Transforms are defined on the stylistic properties of an HTML DOM Element. For
example, the markup for rotating an element 45 degrees along its Z axis would look
like this:

#element {

transform: rotateZ(45deg);

}

Attaching a transform to the <body> element of your HTML document
works exactly the same way. So performing in order to declaratively add the same
effect to your document’s <body> you could do something like
this:

body {

transform: rotateZ(45deg);

}

Let’s look at a before-and-after shot of a page when applying a transform to the
body element:

src="https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/00/38/71/metablogapi/5556.fpauc-image1.jpg" original-url="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-38-71-metablogapi/5556.fpauc_2D00_image1.jpg" />
Applying a rotateZ(45deg) transform to the body element of a document.

For three dimensional transformations, the CSS Transforms specification defines
the perspective property that can be specified on the parent of the
element that we transforming. When transforming the <body> element
of your content, it has to be applied to the <html> element that
resides above it in the DOM hierarchy. Doing so is straightforward:

html {

perspective: 500px;

}

Combining this with a rotateY(45deg) transform on the <body>
element yields the following result:

src="https://msdnshared.blob.core.windows.net/media/MSDNBlogsFS/prod.evol.blogs.msdn.com/CommunityServer.Blogs.Components.WeblogFiles/00/00/00/38/71/metablogapi/1323.fpauc-image2.jpg" original-url="http://blogs.msdn.com/cfs-file.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-38-71-metablogapi/1323.fpauc_2D00_image2.jpg" />
Applying a rotate(45deg) transform to <body> with perspective: 500px set on
<html>.

We can manipulate the transform-origin property on the body element
for interesting results. Let’s look at a couple of examples:

body {

transform-origin:
50%100%;

transform: rotateX(45deg);

}

The above markup sets a rotation along X for the body element while shifting the
origin of rotations to the bottom of the element using transform-origin.
Effectively this rotates the document’s contents “into” the screen like this:

We can also manipulate the perspective-origin property on the root
element of our document to achieve an off-axis projection effect. Changing the style
for <html> to:

html {

perspective: 500px;

perspective-origin:
90%50%;

}

Our page now looks like this:

By using CSS Transforms, we can easily manipulate the visual appearance of the entirety
of our page’s content. Since the usual layout and sizing rules still apply, some
transforms on the body element (particularly ones that use percentage values or
rely on the transform-origin property) can result in different visual
effects depending on the content of our page. Recall our previous rotateX(45deg)
example with transform-origin set to 50% 100%.

Below you can see the results before and after the transform is applied.

Notice how the content does not actually pivot on the bottom of the window but rather
at some point outside of the viewport. This is expected behavior for CSS Transforms:
the <body> is laid out normally, then it is rotated along its
bottom edge that is somewhere off screen. You will also notice that the actual foot
print of the content has expanded (take a look at the scroll bars in the “after”
picture) in order to accommodate the transformed content (the fact that we are using
perspective projection makes this effect even more pronounced).

So how do we deal with arbitrarily sized content when applying transforms to our
body element? Custom tailoring all content in order to ensure that the size of the
body does not expand more than a certain amount may be unrealistic. Instead, we
can use a simple HTML/CSS pattern that allows us to fix the size of the body element
to that of the browser window and append content inside a wrapper <div>.
The following markup achieves just that:

html, body
{

width: 100%;

height: 100%;

min-width: 100%;

max-width: 100%;

padding: 0;

margin: 0;

overflow: hidden;

}

#Wrapper {

position: absolute;

width: 100%;

height: 100%;

overflow: scroll;

}

The illustration below shows what happens when a page is scrolled vertically and
we apply a rotateY(45deg) transform to the <body>
element of our document directly (left) and using the wrapper pattern (right):

The direct application of the transform results in a skewed visual result due to
the off-axis projection (since we are no longer looking at the “center” of the body
element). Using the wrapper pattern ensures that the <html> element’sperspective-origin property (50% 50% by default) will
always be correctly centered with relation to the <body> element,
giving us a pleasant visual effect.

By utilizing the above pattern and setting up CSS Transforms with percentage values
whenever possible, we can affect our <body> element in consistent
ways, regardless of the size of its contents.

From Transforms to Animations

Having sorted out the intricacies of applying CSS Transforms to the <body>
element, CSS Animations are the next step. By following the principles described
above, we can create animations that bring our Web content into view (or remove
it from view) in interesting ways.

Consider this basic @keyframes rule:

@keyframes rotateInLeft {

from {

transform-origin:
0%0%;

transform: rotateY(180deg);

}

to {

transform-origin:
0%0%;

transform: rotateY(0deg);

}

}

When applied to an element, this animation will cause it to rotate on its left side.
When applied to a <body> element that uses our wrapper pattern
the visual result is more interesting. The document will actually rotate from outside
of the visible area of the browser window and into full view:

Similarly, we can compose animations that fluidly remove our Web content from view.
For example, if we wanted our page to disappear into the distance while rotating,
we could use something like this:

@keyframes whirlOut {

to {

transform: scale(0)rotateZ(1260deg);

}

}

With the visual result being:

Since we can use the full power of CSS Animations to affect the entirety of our
Web content, we have a lot of flexibility in terms of generating these page effects
(and we are certainly not limited to just using CSS Transforms). But once we have
composed the effects that we want to apply to our content, how do we cause them
to trigger during the page navigation process?

Attaching Animations to <body>

Our goal is to use trigger animations at strategic times during the browser experience
in order to give the appearance of content transitioning into view when a page loads
and out of view when the user clicks on a link.

The first intuitive place to add an animation to the body element would be the
onload JavaScript event. As it turns out however, adding an animation
when onload fires is actually too late. This event actually triggers
when the entirety of the content in our page has finished loading (including any
images or other bandwidth-intensive resources). Attaching an animation to onload
on a bandwidth-intensive page would result in our content displaying “normally,”
followed by the animation triggering and re-bringing the content into view. Not
exactly the effect that we were aiming for.

Alternatively, we could utilize the DOMContentLoaded event that triggers
when the browser has finished parsing the DOM structure of our content (but potentially
before resources have finished loading). The IE Test Drive DOMContentLoaded demo illustrates the difference between these
two events. However, in cases of complex Web content, a modern browser may choose
to perform “progressive” rendering, displaying the page before the entirety of the
DOM tree has been loaded. In these situations, the visual result would be similar
to the onload scenario.

The optimal place to set up an animation that transitions our page content in view
is inline at the top of the <body> element. This ensures that
the animation will commence right as the content is being rendered (and that the
starting position of the content will be that of the from keyframe
of our selected animation). A pleasant side effect of this approach is that the
animation may actually mask any progressive rendering, re-layout or resource loading
that can occur with complex content.

Setting up the animations that transition our content out of view is also interesting.
One could assume that we could attach an onclick handler to all elements
of interest in our content (for instance all <a> tags) and just
set the relevant animation properties (animation-name, animation-duration,
etc.) in the callback function. However, if we do not actually delay the
navigation from happening, we will not see our expected fluid transition.

This is a good opportunity to utilize the
animation events described in the CSS Animations specification. In particular,
we can use the animationend event to detect when the animation has
completed and thentrigger a navigation (by setting window.location.href,
for instance). Thus our onclick will trigger the “remove-from-view”
animation and register a handler for animationend on <body>
that will ensure that the navigation event occurs.

To simply enjoy the page-to-page animations, step through the pages of the tutorial using the “Continue to ...” links in the lower right corner of each page.

At the end of the tutorial we provide some additional guidance and sample code on
how to incorporate these animations with your own Web content.

Conclusion

CSS Transforms and CSS Animations are two powerful feature-sets that enable richer
and more immersive Web experiences. This blog post outlined the considerations of
using CSS Transforms and CSS Animations to bring the entirety of your Web content
to life. With a small amount of effort you can create Web pages (even static ones)
that provide a fluid and almost app-like navigation experience.

I installed Windows 8 final yesterday. IE 10 was great, but the OS is full of problems. I need to revert back to Windows 7. However, the lack of IE 10 is very concerning… Please talk to us about IE10 support on Windows 7.

@Andrew, wtf? Which version did you installed? I have installed Windows 8 RTM on three machines; Core2Duo desktop, Pentium 4 and Core i5 laptop AND its working like a charm. The whole OS is like a charm. What "problem" are you facing? and which version are you using? Are you using release preview? OR are you just bullshiting here?

I have been using Windows 8 for three months now, and I absolutely love it! Everything is a lot snappier, faster, and richer. Thank you IE team for working and implementing this, your teams work is well appreciated! The demos are pretty slick, keep it coming!

"The optimal place to set up an animation that transitions our page content in view is inline at the top of the <body> element."

Yes, let's go back to the wrong way of web development. Why use external CSS/JS at all? Let's cram everything inline!

Also, I'm glad you guys caught up. I've been doing -vendor-transform on a production ready website since March 2011 and our Opera/Chrome/Firefox users have been enjoying subtle tranforms/fade-ins, etc. already. Will our IE users have to pay for Windows 8 to enjoy these too?

2.) Post an update about full flash support in Metro without the censorship list

3.) Windows 7 version of IE10 beta so that developers can actually test IE10 – something they can't easily do now

4.) Publish a post regarding Metro support of other browsers – will we be able to upgrade IE10 Metro to a Metro version of Chrome or Firefox?! Especially if that is the only way businesses and users can get complete flash support

5.) Publish an updated UserAgent string for IE10 that indicates if IE is running in Metro mode or not

I'm starting to believe it's only one person making these annoying posts. The only valid point of your comment is #1 (and it even has an alternative solution – write your comment on Notepad, or Word, or whatever word processing program you use).

#2 – I'm not sure what are you specifically requesting, although what you seem to be requesting is impossible.

#3 – OMG! Y U NO READ BEFORE?! IE10 will be RTW-ed for Windows 7 soon, there is _NO_ beta to come. If you're a developer, you should be running Windows 8 Previews (and RTM now) on a VM or Dual-booting it…

#4 – YOU CANNOT UPGRADE ANY BROWSER TO CHROME OR MOZILLA TO OPERA OR SAFARI OR WHATEVER! They are different applications, for God's sake, don't you get that?! Also, other browsers use the plug-in version of Flash, so the mechanism is different. That's why those announcements must be made by each browser vendor, separately…

Even if IE10 for Windows 7 will be released soon, we still don't know if we get all of the features/improvements there. The thing seems to be tightly integrated with Windows 8 – I just hope they're not stripping out important stuff because some internal APIs are not available on Windows 7.

BTW it's not only the blog engine that sucks, it's the overall layout which looks rubbish. Not very nice for a blog that praises web browsing technologies.

@Sevenacids – Seriously? If this is a try from you to get people over to the webs privacy problem called Google Chrome or Firefox/Opera, then stop it. This blog is about the progress of Internet Explorer, not about how bad it is in your eyes. They will release Internet Explorer 10 for Windows 7 and yes, it will get all the features from the Windows 8 version…

1) where the $&@?! Is the Windows 7 release of IE10! We want to start testing!

2) please for the love of God kill the flash list

3) metro and desktop IE still don't share a session which makes users log in twice to every site they use… This is not acceptable! Nor is it remotely desirable and makes usability suck

4) security experts have now indicated that since IE metro and desktop don't share a session that users will be more susceptible to phishing attacks and worse yet Microsoft has now Doubled the attack surface of IE (the worlds most insecure browser – 10 years in a row!)

5) everyone keeps overlooking this but is anyone going to mention that metro is just plain ugly!? Where are the 3D rounded buttons that afford usability because the user can visually tell they are clickable? – has no one at microsoft read Steve Krug's book?!

6) when is someone going to fix the IE blog comment system?!?

7) when is Microsoft going to address all the concerns of developers on this blog?!?

8) if you're just going to ignore us on the blog and on connect I think you should just shut them both down… It's frustrating to think that all these attempts at openness were a sham but it was nice for a while to think our opinions and input were actually appreciated.

9) why are users forced to boot into metro when they'd rather boot to the desktop?

I'm giving up on IE/microsoft because Microsoft has given up on being open and respecting and addressing developers.

Is "immersive IE" the name for Metro IE where interactive Flash is disabled by default and only the elite and wealthy can get their sites to run?

Or is "Subversive IE" the name for Metro where it loses your session, takes you to a different visual context, forces you to re-login, forces you to re-navigate to where you were and return to a black screen when you go back to Metro?

OMG I finally got the metaphor!

Metro is the subway in Montreal Canada… And in the tunnels it is pitch black with nothing of interest to see!… I can't believe we didn't see this already! Will this metaphor be explained in full when Windows 8 ships so that everyone knows why the usability sucks worse than trying to use a left handed can opener wearing oven mitts to open a pack of Smarties!

2. I think the request is reasonable in a way. On the other hand, I am not sure anyone would actually use Metro, so maybe it is a much-ado-about-nothing situation.

3. Microsoft actually stated that Internet Explorer 10 for Windows 7 will have a pre-release version before the final one (as it should, to catch final issues its testing was not able to find). Sorry for not posting a link for that – it was a blog post from around the third platform preview period, I believe. Also, regarding your suggestion – people should not be forced to spend hours of downloading, installing and adjusting to a new operating system (and a pre-release version of it) in order to help with testing (for free!) a new browser (that will eventually be released for a earlier operating system).

4. I believe the wording was sarcastic. I am sure the poster means, selecting another browser instead of Internet Explorer as the default one. Since I am involved in the Chromium project a bit (voluntarily) and in general, I know that Microsoft has been encouraging (perhaps that is an overstatement) browser vendors to create Metro versions of their browsers, as well as giving them extra privileges (for example, having a JIT engine or something along these lines) in order to make it happen. Perhaps the poster is not up to date. Although, I am not sure it means that Metro style applications will indeed use the default browser rather than the standard Windows runtime/browser, but that is different topic (and I guess the answer is no, if they depend on the JavaScript version of Windows RT or something).

5. Please, do not try to tell the poster why they need to have a Metro token. Every website has different requirements. Companies may want to create a different experience for Metro, even though they are not using any plugin, because they want the "immersive" (full screen, touch, for example) experience to be different and they want to know it up front, in order to save a redundant round trip/redirect/second.

When is Microsoft going to announce to the public that the ARM tablets won't run any of the customer's previously purchased software? I find it almost un-ethical that there has been no public information to explain that the ARM tablets are severely crippled from day 1 because standard programs won't run in the desktop version of Windows 8/ARM.

Its not quite as bad as stating IE Metro supports Flash and then disabling it by default for every website unless developers spend time and money to get their sites added to Microsoft's proprietary flash censorship list – but it is still pretty horrible!

@Mark – There will be an IE10 for Windows 7. And for XP and Vista, the consummers don't care about there browser, theye don't know there is something like a browser. The marketshare of Chrome explaind: just install it without the knowledge of users…

@Yannick the IE blog comment form regularly (like 7 times out of 10 or more) fails to post/save the comments.

Many have complained about this for years, pointed out the specific bugs and conditions it fails under but neither Microsoft nor Telligent (the makers of the blog software) have acknowledged the bugs or made any attempt to fix them. If you are a web developer you'll likely be familiar with the Legacy ASP postback technique (which this blog uses) and you'll likely recall that there are major bugs with it if you don't use it carefully. Needless to say this blog does not use it use it well.

Developers have posted the fix on several occasions but Microsoft is arrogant and refuses to listen to their developer community and thus has ignored the issue.

To see the bug in action load more than one page of the IE blog in multiple tabs and then attempt to comment on one of them (that was not the last page loaded) – due to lazy developers not familiar with shared sessions across tabs… Your comment is imediately invalidated – FAIL

Next try loading the page you might want to comment on. Read the full article and the comments then write your own. If you took more than 15min to read everything or organize your thoughts the blog automatically assumes you are spam and does not accept the comment – FAIL

Next try just loading up any blog post on the IE blog, scroll down and leave a comment. You have a 50/50 shot at getting that comment to save.

Workaround for now.. ALWAYS save your comment before submitting!!!!

Better option – fix the IE blog so that these issues don't choke the blog or move off classic ASP and get a real working blog software up and running so we don't have these issues ever again.

@Yannick: The IE team is COMPLETELY silent about IE10 for Win7. Absolutely no response is given to any question regarding it, not a single word. The last platform preview that ran on Win7 is over a year old. None of the MSFT people said in this blog that it will be released either, only misc comments seem to be adamant that it will be out for Win7.

In the past, new IE releases have always been made available before the OS they were tied to were released, and had plenty of beta versions preceding the final release. IE10 for Win7 has NONE of those. It should have been out by now, yet we don't even have a beta release, or an up to date preview to begin with. And with the complete lack of public beta testing, it will be a complete mess IF it ever gets released for Win7.

And to add insult to injury, that recent KB article states that IE10 is only released for Windows 8.

They haven't had Windows 7 releases because porting everything over for every pre release was a waste of time. Now that the Windows 8 version is finished they are porting it to 7 and when it is done they will release it. These things take time. And no the IE team isn't completely silent, they just aren't talking about it on here cause you guys wouldn't believe them anyway.

Yeah, because it would be that difficult to drop a line saying what-the-heck is the status with the Win7 version anyway. You know, something that is asked in the comments for every single post for the last year.

And note that for every release so far between IE7 to 9, the non-OS tied version always came out either before the OS, or when the OS RTMed. And all had beta versions on multiple systems to be tested.

None of these are true for IE10. The truth is, we have no idea if it's even being worked at all, other than some comments made by Microsoft a year ago – and we know that they don't mind doing a 180 degrees turn on some of their decisions.

Only suggested, but not confirmed. And I wouldn't be surprised if that revision of the KB article was added because I posted the feedback "not helpful", and for how to improve the article, I entered "by releasing Internet Explorer 10 for Windows 7".

I'm not submitting sweet F_ A_ to the flash list until Microsoft opens up communication on this blog about the Flash problem they've created.

Flash should just work – there's no reason to put users and developers through all this stress for no good reason.

I can't even imagine how much money has been wasted so far on this project from the infrastructure put in place to manage it and update the millions of PCs and devices with the new list every single month. Not to mention the wasted developer time attempting to comply with the test case requirements to get flash content to be approved by Microsoft when it runs just fine right now without any testing required.

Please let's stop this madness before it gets out of control and end this controversy and the wasted effort before everyone hates Internet Explorer 10 and in turn Microsoft before Windows 8 even ships!

I don't use that much flash but the flash I use can not be replaced with HTML5 content as HTML5 doesn't yet handle what Flash can.

Since you proclaimed there would be not 1 but 2 releases on Windows 7 before a GA release we did not bother downloading an entire operating system (win8beta) just to test out our sites/test suites.

Now you are telling us that IE10 is done, and already going to manufacturing… What the hell?!?! Are you even aware that 98% of the developers out there have not tested IE10 yet?! Would it not be good to get their feedback so that bugs like the IE9 thick border, with border radius applied leaves ghosts if placed on a background of the same color… Get fixed!

Then you drop a bombshell on us that you are supporting flash in Metro IE.. But only for developers that add their sites to a special elite list that they can only find out about on this blog and when they do they need to buy hardware to run a suite of tests just so they can ask to be added to the list!

They then need to wait up to 3 months to get on the list and pushed to devices… If they get approved and if they have a high enough hit count to be considered for the list.

I think I'd be silent too… Maybe if you stay really quiet the townsfolk banging on your door with their pitchforks will quietly move on… Yeah that's the ticket! Be silent! That will solve all the problems you've created.

IE8 – the last development cycle of IE where Microsoft remotely cared about their developer community. What a shame!

@Jill, "Welcome to The Internet": The age where YOU are self deteriorating YOURSELF by selling off YOUR privacy. The age where you born "Human Being" but die like a fool.

Its not metro apps only, its desktop too! Its not Windows 8 only its all version of Windows. Its not Windows only, its all operating systems connected to Internet. Even the folks at Redhat know what are you up to. Anything running on BGP protocol is threat to privacy. Like it or not The Internet sucks on privacy!

Coz when you are connected, "You have been watched"..

Steve Balmer himself keeps paper notepad and pen in his pocket (during his trip to Korea he hinted on it).

The biggest privacy selling corporation in the name of openness known to mankind is Google. Selling your search history, thinking pattern, choices you make, links you tap, routes you take, your moods, the Gmail email you sent, the email you receive, the email you read, the email you saved in draft…everything is sold for dimes to the interesting parties; intelligence collectors etc. While you are getting inspired and wowing the technology and you have been told that its for your own good, you are basically screwing yourself in a bigger picture..

It was the part of Illuminates' new world order. The idea really is to spot and profile anyone at anytime in the entire world.. so they can control humans like their little b….es and "disinfect" anyone at anytime who is against their rules.

~ the more rapidly countries adapt IPv6, the more quickly the entire humanity will tear apart.. nobody wins eventually but many people will get hurt by it.

As I sit here typing on my Android tablet (that plays adobe flash without issue) I have to wonder what on earth Microsoft is tryimg to gain out of the flash censorship list they created?

Its been proven by developers to be nothing less than a waste of developer time.

Its been noted as financially expensive to meet the requirements set forth by Microsoft that dont show any merit.

Users have already complained that they dont have access to the content they could see/use without issue before "upgrading" to windows 8 and IE10.

IT administrators are already posting questions on forums asking how to turn this filter list off.

Users everywhere are asking how to skip the metro interface and get their desktop directly.

All the while microsoft sits silent as the chaos they created destroys what little respect we had left for IE.

Congratulations on ****ing off developers, users, and IT staff all at the same time with IE10/Metro/Desktop Windows 8. Welcome to the new Vista folks! Guess we wont be upgrading until the Windows 9/IE11.

If you count on that there is a new version of IE10 every 12 weeks, than, the current cycle end in begin september (Platform Preview 6 is now 11 weeks ago). So, maybe a release in the begin of september (4th or 15th?).

Maybe you can mock us too? That would be the insult added to the injury.

Or maybe you could step up to the mic and say something about this Flash issue you've created instead of sitting on the sidelines watching the chaos the ridiculous Metro whitelist has forced on developers.

Personally I'm boycotting Microsoft until they explain how this whole mess is going to be dismantled. We're sick of waiting – write a post and give us a status update!

Developers are fuming about this concept and especially the conflict of interest with the horrible implementation yet Microsoft is stone cold silent!

Don't even get us started on the complete lack of userAgent/JavaScript triggers to know if our sites are stuck in Metro mode so we can at least quickly notify users to switch before they login and are stuck in Metro. The usability of switching from metro to desktop and back is the worst in browser history even worse than IE6 printing.

I've decided that instead of fighting with IE Metro mode trying to get on the flash list etc. that's it's a complete waste of time. The rule about not using a VM to test is ridiculous!

Instead I'm simply going to tell users that Metro IE is not supported.

I'm tired of trying to conform to IE's silly games – I expect a lot of apps to just plain not support metro due to this flash/session issue and the blame for the issue lies squarely on Microsofts shoulders.

I can't believe I even wasted that much time just trying to follow the rules – what a joke.