CSS3 Transitions on Transforms in Firefox 4

July 29th, 2010

In one of my previous posts, I showed how to use SVG as a mask over top of video and I based it on what I saw in a demo video showing off what Firefox 4 can do. With the release of the second Firefox 4 beta, Mozilla has released a few of the demos along with the code. The demo that I think has the most potential for real world use, is the London Project. I can see sites being animated like this really taking off, for better or for worse. And the great thing is, it only takes a few lines of CSS and one line of JavaScript to do it.

Here’s my version of what Paul Rouget made without the video.

How does it work? Like most CSS3 animations, it’s easy once you’ve figured it out. First off, the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body class="intro">
<div id="wrapper">
 <div id="intro" onclick="document.body.classList.remove('intro')">
    <h1><a href="#">WELCOME</a></h1>
    <p><a href="#">Click Here</a></p>
 </div>
 <div id="logo">
    <img src="demo_logo.png" />
 </div>
 <div id="picture">
    <img src="robot_slap.jpg" />
 </div>
 <div id="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique sem id tortor lacinia vel iaculis turpis tincidunt. Sed tincidunt venenatis neque, vel pretium dui suscipit id. Duis sit amet nibh quis ante pretium faucibus nec in quam. In feugiat rhoncus diam, id porta lorem blandit eget. Vivamus et velit sit amet nunc cursus pretium. Mauris in lectus nec tortor lacinia vehicula. Nam sed elit augue. Mauris id magna ipsum. Quisque sagittis aliquam elit at sagittis.</p>
 </div>
</div>
</body>

The only thing here that’s important to the animation is this line: <div id=”intro” onclick=”document.body.classList.remove(‘intro’)”>. This is what triggers the animation when the right box is clicked. It does this by removing the class “intro” that’s assigned to the body tag and then the elements of the page are animated to their new position on the page. Here’s the CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
body {
   margin:0; padding:0;
   background:#dabe25;
 font-family:Arial, sans-serif;
}
#wrapper {
   width:900px;
   height:500px;
   border:10px solid #000;
   margin:50px auto;
   -moz-border-radius:80px 0 80px 0;
 -webkit-border-radius:80px 0 80px 0;
   background:#fff;
   position:relative;
}
#intro {
 width:200px;
 height:100px;
 border:10px solid #000;
 text-align:center;
 position:absolute;
 left:350px;
 top:-200px;
 opacity:0;
}
#intro a {
 text-decoration:none;
 color:#000;
}
#intro h1 {
 margin:10px 0 0 0;
}
#logo {
 position:absolute;
 left:620px;
 top:15px;
 -moz-transition-duration:1s;
 -moz-transition-delay:1s;
}
#picture {
 width:500px;
 height:375px;
 border:10px solid black;
 position:absolute;
 top:60px;
 left:50px;
 -moz-transition-duration:1s;
 -moz-transition-delay:.5s;
}
#text {
 width:250px;
 padding:10px;
 border:10px solid #000;
 position:absolute;
 left:590px;
 top:130px;
 background:#ccc;
 -moz-transition-duration:1s;
 -moz-transition-delay:2s;
}
#text p {
 margin:0;
}
body.intro #intro {
 -moz-transform:translate(0, 380px);
 opacity:1;
}
body.intro #logo {
 -moz-transform:translate(0, -200px);
}
body.intro #picture {
 -moz-transform:translate(0, -800px);
}
body.intro #text {
 -moz-transform:translate(0, -800px);
}

Most of this is styling, which we don’t need to worry about here. We’ll look at just the #logo div because they all behave the same. If you look at the CSS for #logo, you’ll see its final positioning on the page. But there’s also body.intro #logo. Here, we’re using the transform property to animate the positioning of the #logo div. Using translate, we set the initial position to -200px which will take it off the viewable part of the page. And when the #intro div is clicked and the “intro” class is removed from the body tag, the #logo div is animated to its permanent position using the -moz-transition-duration property. All the different elements come in in a staggered effect using the -moz-transition-delay property.

And that’s it. Something that people will use Flash to get the same effect can now be done using just HTML, CSS and the tiniest amount of JavaScript. Right now this only works in Firefox 4, but it’s designed to display properly in all other browsers, just without the animation or, in some cases, the rounded corners.

Poke around in the demo and look at the Mozilla one, which adds SVG masks to the mix. Getting on board with techniques like this as early as possible is going to be the right move, especially since HTML5 is the latest buzzword clients are bringing up when talking about websites. And I’m a fan of adding in extra things like this for people that use newer browsers, as long as it still displays properly in older ones.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>