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:
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:
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’s
perspective-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.
Live Demo Available
We’ve created a demonstration
and tutorial on bringing pages alive with CSS Transforms & Animations
that provide depth and examples beyond what we’ve been able to show here. The tutorial
itself utilizes full page animations during page navigation that work in
Internet Explorer 10 on Windows 8 as well as recent versions of Chrome and
Firefox..
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.
—Charilaos “Harris” Papadopoulos, Program Manager Intern, Internet Explorer Graphics
Comments
Anonymous
August 16, 2012
Those are very nice functions, too bad that they cannot be used on Internet Explorer for Windows 7 users.Anonymous
August 16, 2012
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.Anonymous
August 16, 2012
Pretty nifty, but I fear that this will become the new <blink> tag as every link suddenly triggers an animation.Anonymous
August 16, 2012
The comment has been removedAnonymous
August 16, 2012
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!Anonymous
August 16, 2012
yet again microsoft keeps quiet about IE10 on windows 7.Anonymous
August 16, 2012
Kudos to the intern for writing such great blog posts, I hope he is not working for free.Anonymous
August 16, 2012
And practical use of these effects? They will end like <marquee> and <blink> tag and never find a way to professional web pages, only to teenage blogs.Anonymous
August 16, 2012
I have not spent enough time working on CSS 3D Transformers, but the whole psespective property doesn't make sense to me ... why is the value of 500px applied?Anonymous
August 16, 2012
@Finn I don't think that, example: Microsoft can use them for a fade-in if they restyle their's website to de Modern UI.Anonymous
August 16, 2012
How to disable this since it renders a web site unusable for those with acessability needs or over 35?Anonymous
August 17, 2012
"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?Anonymous
August 17, 2012
xcvxvcAnonymous
August 17, 2012
The comment has been removedAnonymous
August 17, 2012
The comment has been removedAnonymous
August 17, 2012
The comment has been removedAnonymous
August 17, 2012
IE 10 on Windows 7 required! (or CSS transform and animations to IE 9). Absolutely!Anonymous
August 17, 2012
niceAnonymous
August 18, 2012
Wake up! Microsoft will not publish IE10 on Windows 7. IE10 is the only argument they have to sell Windows 8 for desktop PCs.Anonymous
August 18, 2012
Of course they won't, simply to satisfy your evil self! /s IE10 is coming out very soon, IMO before Sep 5.Anonymous
August 18, 2012
The comment has been removedAnonymous
August 18, 2012
@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...Anonymous
August 18, 2012
The comment has been removedAnonymous
August 18, 2012
The comment has been removedAnonymous
August 18, 2012
What about the following KB article? support.microsoft.com/.../2718695 It states 'Internet Explorer 10 is included in Windows 8. It is not available for Windows 7 or earlier versions'.Anonymous
August 19, 2012
@ mSri - it doesn't say it's wont be available for Windows 7, that update is just only for Windows 8 with IE10.Anonymous
August 19, 2012
The comment has been removedAnonymous
August 19, 2012
I appologize in advance to all the regular readers but I'm sorry we've had enough! @Microsoft - Fix the IE Blog comment form! @Microsoft - Fix the IE Blog comment form! @Microsoft - Fix the IE Blog comment form! @Microsoft - Fix the IE Blog comment form! This post will be posted multiple times daily until the Blog comment form is fixed. You've had over 5 years to fix this, enough is enough!Anonymous
August 20, 2012
The comment has been removedAnonymous
August 20, 2012
Favorites ARE supported on Immersive IE10: To add a site, click the pin button and select "Add to Favorites". To remove a site, either:
- start typing its name in the location bar. Then right click it and select "Remove".
- click the location bar and scroll to the right of "Frequent" sites; you have your "Favorites" there. Right-click the one you want and select "Remove".
Anonymous
August 20, 2012
I appologize in advance to all the regular readers but I'm sorry we've had enough! @Microsoft - Fix the IE Blog comment form! @Microsoft - Fix the IE Blog comment form! @Microsoft - Fix the IE Blog comment form! @Microsoft - Fix the IE Blog comment form! This post will be posted multiple times daily until the Blog comment form is fixed. You've had over 5 years to fix this, enough is enough!Anonymous
August 20, 2012
The comment has been removedAnonymous
August 20, 2012
The comment has been removedAnonymous
August 20, 2012
The comment has been removedAnonymous
August 20, 2012
This is announced, and actually not a topic to discuse about in the IE blog.Anonymous
August 21, 2012
@mSri To me it says that IE10 is included in Windows 8. It is not yet available for Windows 7. Please not the yet, meaning that at this present time it is unavailable but that will change in time. Please also notice how it doesn't mention any earlier versions. So from this you can deduce that IE 10 is coming for Windows 7, and will never be supported on Vista or earlier.Anonymous
August 21, 2012
They've just updated the article. Prior to today, it did seem to imply that IE10 wouldn't be available for Windows 7.Anonymous
August 21, 2012
I agree with most of your points, but I must say that no matter how difficult, there's always a solution... :) On issue #5: there was a blog post about the different UA strings of IE10 across different devices. Since only Windows 8 RT is Modern-style-only, that experience can be tailored to Windows 8 RT.Anonymous
August 21, 2012
so what? if there will be no ie10 for win7/winxp/winVista , then all will use google chrome or firefox or opera, or other browser. Microsoft will be the loserAnonymous
August 21, 2012
@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... @Fix The Blog - Shut up, if you want theye fix it, be patient. What's extually wrong whit the comment system, al works fine over here.Anonymous
August 21, 2012
The comment has been removedAnonymous
August 21, 2012
@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. Make of that what you will.Anonymous
August 21, 2012
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.Anonymous
August 21, 2012
The comment has been removedAnonymous
August 21, 2012
L2Read guys. "Note Internet Explorer 10 is included in Windows 8. It is not yet available for Windows 7" See that "yet"?Anonymous
August 21, 2012
From support.microsoft.com/.../2718695 : "Last Review: August 21, 2012 - Revision: 3.0" They quietly corrected it yesterday. Originally it definitely suggested IE10 wouldn't be available for Windows 7.Anonymous
August 21, 2012
Well that should be confirmation enough for you guys, they wouldn't correct it if it wasn't coming out.Anonymous
August 22, 2012
Its written IE10 is not "YET" available on Windows 7. It definitely suggested that its on its way!Anonymous
August 22, 2012
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".Anonymous
August 22, 2012
Can someone gives us an IE10 / Chrome comparison using this new Javascript benchmark: octane-benchmark.googlecode.com/.../index.htmlAnonymous
August 22, 2012
That's what it says now. Not what was written prior to August 21, 2012.Anonymous
August 22, 2012
@Javascript speed Not really relevant, ofcourse, Chrome beat IE10, but hey, the benchmark is made by Google. So, what did you exspect?Anonymous
August 22, 2012
The comment has been removedAnonymous
August 22, 2012
The comment has been removedAnonymous
August 22, 2012
MS already said it will be available on W7. Stop spreading FUD about IE10 not being in W7. Will IE10 be on W7? Yes, certainly. Should MS release IE10 on W7 (at least a beta)? Yes, we all certainly think so. However, most likely it is not ready yet.Anonymous
August 22, 2012
The comment has been removedAnonymous
August 22, 2012
In fact on this blog the IEteam user on this blog "ieblog" told us last year: "We will release an IE10 Beta and Release Candidate on Windows 7 prior to IE10’s general availability." blogs.msdn.com/.../html5-for-applications-the-fourth-ie10-platform-preview.aspx It seems now that those two pre releases are not going to happen as the time for a beta release seems already to have passed. So I am not surpised that on this blog people launch complaints. The IE team stated on this blog that they would release a Beta and a release candidate so why do they not follow up on their own statement. They seem to have created false expectations and should now give information on what is really going to happen. Especially the question if they will still release any IE10 version for Windows 7 before general availabilityAnonymous
August 22, 2012
The comment has been removedAnonymous
August 23, 2012
No need to apologize! It alwasy causes me a smile when people indirectly scream it out loud that they have failed a test of their intelligence. @all Somthing very interesting to read and to keep things in perspective: www.nczonline.net/.../the-innovations-of-internet-explorerAnonymous
August 23, 2012
Windows 8 privacy fail! Every app you try to install phones home to Microsoft indicating which IP address tried to install which piece of software! http://log.nadim.cc/?p=78 Completely unacceptable Microsoft - I will be deleting this feature (or Windows 8) imediately!Anonymous
August 24, 2012
The act of connecting to anything on the internet gives away your ip address... if you need your ip address to be private for security reasons then you are not secure at all.Anonymous
August 24, 2012
You must be the First-Day-On-The-Internet Kid... @Jill sums it up correctly. Also, if you're an Internet Security freak, then you should use a VPN for EVERYTHING!Anonymous
August 24, 2012
The comment has been removedAnonymous
August 24, 2012
Smartscreen filtering has been a part op IE8 and IE9 for years. Smartscreen application reputation has been part of IE9 for two years as well. You are on the IE blog. If you object to that you are more than two years to late. Oh, and for the article you listed which mentions the ability to make undsafe sslv2 connections to a server. Since IE7 in 2005 sslv2 has been disabled That was also announced on this blog in 2005 blogs.msdn.com/.../483795.aspx If you trying to link to someone than link to someone who understandads what they are talkng about at least.Anonymous
August 25, 2012
The comment has been removedAnonymous
August 25, 2012
The comment has been removedAnonymous
August 25, 2012
The comment has been removedAnonymous
August 25, 2012
well i belive now it's confirm that ie10 will not be able for windows 7.Anonymous
August 25, 2012
The comment has been removedAnonymous
August 26, 2012
It's cool to see IE10 do all those nifty CSS transformations and other HTML5 WebGL stuff. I think we shoud all start adding those very cool technologies to our websites before the release of IE10.Anonymous
August 26, 2012
The comment has been removedAnonymous
August 26, 2012
The comment has been removedAnonymous
August 27, 2012
Since Windows 8 is RTM now. Is IE10 basically released now (ie. no further changes)?Anonymous
August 27, 2012
Yeah I believe they are done adding new features, maybe bug fixes too. They are converting it to Windows 7 now.Anonymous
August 27, 2012
>2012 >Still waiting for nonexistant IE10 for Win7 I SURE HOPE YOU GUYS DON'T DO THATAnonymous
August 27, 2012
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?).Anonymous
August 27, 2012
The comment has been removedAnonymous
August 27, 2012
Bye Anthony, one less whinner I have to wade throughAnonymous
August 28, 2012
The comment has been removed