What You Need To Know About Behavioral CSS

Advertisement

As we move forward with the Web and browsers become capable of rendering more advanced code, we gradually get closer to the goal of universal standards across all platforms and computers. Not only will we have to spend less time making sure our box model looks right in IE6, but we create an atmosphere ripe for innovation and free of hacks and heavy front-end scripting.

The Web is an extremely adaptive environment and is surrounded by a collaborative community with a wealth of knowledge to share. If we collectively want to be able to have rounded corners, we make it happen. If we want to have multiple background images, we make it happen. If we want border images, we make that happen, too. So desire is not the issue. If it was, we would all still be using tables to lay out our pages and using heavy over-the-top code. We all know that anything can be done on the Web.

Made for the Web

CSS 3 properties like border-radius, box-shadow, and text-shadow are starting to gain momentum in WebKit (Safari, Chrome, etc.) and Gecko (Firefox) browsers. They are already creating more lightweight pages and richer experiences for users, not to mention that they degrade pretty gracefully; but they are only the tip of the iceberg of what we can do with CSS 3.

In this article, we will take those properties a step further and explore transformations, transitions, and animations. We’ll go over the code itself, available support and some examples to show exactly how these new properties improve not only your designs but the overall user experience.

CSS Transformations

CSS transformations are a W3C oddity. It is the first time I have sat down to read the full specifications on something and didn’t feel like I had a handle on the subject afterward. The specs are written with the level of technical jargon you would expect from the W3C, but it focuses on the graphic (as in graph drawing) element of transformations and matrices. Having not dealt with a matrix since freshman-year Calculus, I had to do a lot of good old-fashioned browser testing and guessing and checking for this section.

After going through every tutorial I could find and too many browser tests to count, I came out with some useful information on CSS transformations that I think we can all benefit from.

transform();

The transform property allows for the kind of functions also allowed by SVG. It can be applied to both inline and block-level elements. It allows us to twist, zoom in on and move elements, all with one line of CSS.

One of the biggest complaints about cutting-edge design is that the text is not selectable. This is no longer a problem when you use the transform property to manipulate text, because it is pure CSS and so any text within the element remains selectable. This is a huge advantage of CSS over using an image (or background image).

Some interesting and useful transform functions (that are supported):

  • rotate
    Rotate allow you to turn an object by passing a degree value through the function.
  • scale
    Scale is a zooming function and can make any element larger. It takes positive and negative values as well as decimals.
  • translate
    Translate essentially repositions an element based on X and Y coordinates.

Let’s look at each of these in more detail.

Rotate

The transform property has many uses, one of which is to rotate. Rotation turns an object based on a degree value and can be applied to both inline and block-level elements, It makes for a pretty cool effect.

text rotation example

#nav {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

Please notice that in IE 8 (when not in standards mode) it’s required that you type “-ms-filter” instead of just “filter” in your CSS.

Support
Support for transform: rotate is surprisingly widespread. In the CSS snippet above, we directly target -webkit- and -moz- and rotate the #nav element by -90 degrees.

Pretty straightforward, right? The only problem is that the rotation is for a pretty important design element, and many designers will be reluctant to use it if Internet Explorer does not recognize it.

Luckily, IE has a filter for this: the image transform filter. It can take four rotation values: 0, 1, 2, and 3. You won’t get the same fine-grained control that comes with Webkit and Gecko, but your design will remain consistent across older browsers (even IE6).

Is it okay to use?
Yes, but make sure it is thoroughly tested.

Scale

Scaling does exactly what you think it would do: zoom in and out on an element. The scale function takes both width and height values, and those values can be positive, negative or decimals.

Positive values scale up the element, as you would expect, based on the width and height specified.

Negative values do not shrink the element, but rather reverse it (e.g. text is turned backwards) and then scaled accordingly. You can, however, use decimal values lower than 1 (e.g. .5) to shrink or zoom out of an element.

transform scale example

#nav {
/* The nav element width and height will double in size */
-webkit-transform: scale(2);
-moz-transform: scale(2);
}

#nav {
/* The nav element width will double in size, but the height will remain unchanged*/
-webkit-transform: scale(2, 1);
-moz-transform: scale(2, 1);
}

#nav {
/* The nav element width will double in size and flip horizontally,
but the height will remain unchanged */
-webkit-transform: scale(-2, 1);
-moz-transform: scale(-2, 1);
}

Support
The scale transformation is supported in Firefox, Safari and Chrome, but not any version of Internet Explorer (yet) as far as I could tell. Scaling an object is a fairly significant design choice, but it can be applied with progressive enhancement using :hover, which can add a little pop to your navigation especially.

#nav li a:hover{
/* This should make your navigation links zoom slightly on hover */
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}

Is it okay to use?
From time to time, yes. But not with critical design elements.

Translate

The name “translate” is a little misleading. It is actually a method of positioning elements using X and Y values.

It looks much the same as the other kinds of transformation but adds an extra dimension to your website.

transform translate example

#nav{
/* This will move the #nav element left 10 pixels and down 20 pixels. */
-moz-transform: translate(10px, 20px);
-webkit-transform: translate(10px, 20px);
}

Support
Translate is currently supported in Firefox, Safari and Chrome when you use the vender extensions -moz- and -webkit-.

Is it okay to use?
Yes, but normal X/Y positioning is just as effective in many situations.

Chaining Transformations

Transformations are great individually, but if you want multiple transformations, the code can pile up pretty quickly, especially with the vendor extensions. Luckily, we have some built-in shortcuts:

#nav{
-moz-transform: translate(10, 25);
-webkit-transform: translate(10, 25);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: scale(2, 1);
-webkit-transform: scale(2, 1);
}

These transformations can be chained together to make your CSS more efficient:

#nav{
-moz-transform: translate(10, 25) rotate(90deg) scale(2, 1);
-webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1);
}

The real power of these properties is in combining and chaining them. You can move, turn, zoom in on and manipulate any inline or block-level element without JavaScript. Once support for these properties becomes widespread, we’ll be able to build and design even richer and more lightweight interfaces and applications.

Transition

A basic transition refers to a CSS property that define and moves an element from its inactive state (e.g. dark-blue background) to its hover or active state (e.g. light-blue background).

Transitions can be coupled with transformations (and trigger events such as :hover or :focus) to create a kind of animation. Fading the background color, sliding a block and spinning an object can all be done with CSS transitions.

#nav a{
background-color:red;
}

#nav a:hover,
#nav a:focus{
background-color:blue;

/* tell the transition to apply to background-color (looks like a CSS variable, doesn't it? #foreshadowing)*/
-webkit-transition-property:background-color;

/* make it 2 seconds long */
-webkit-transition-duration:2s;
}

Support
As cool as the transition property is, support is mostly limited to WebKit browsers. -moz-transition already works in the latest nightly build of Firefox 3.7 (so it’s guaranteed for the future). So it’s safe to assume that it is right behind WebKit on this. So you may as well add -moz-transition to your CSS for future enhancements. And even a version without a vendor extension, just in case.

Is it okay to use?
For subtle enhancements, yes, but not for dramatic effects.

Animation

Animations are where the real action in CSS 3 is. You can combine all of the elements we’ve talked about above with animation properties like animation-duration, animation-name and animation-timing-function to create Flash-like animations with pure CSS.

#rotate {
margin: 0 auto;
width: 600px;
height: 400px;

/* Ensures we're in 3-D space */
-webkit-transform-style: preserve-3d;

/*
Make the whole set of rows use the x-axis spin animation
for a duration of 7 seconds, running infinitely and linearly.
*/

-webkit-animation-name: x-spin;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

/* Defining the animation to be called. */
@-webkit-keyframes x-spin {
   0%    { -webkit-transform: rotateX(0deg); }
   50%   { -webkit-transform: rotateX(180deg); }
   100%  { -webkit-transform: rotateX(360deg); }
}

All this fantastic CSS animation code and a live example can be found at CSS3.info demo. The demo is viewable in any browser, but the animation works only in the nightly build of WebKit. It looks just like the video above, but it’s worth installing WebKit to see it for yourself (it’s pretty awesome).

SupportThere is, unfortunately, only a limited support for CSS animations yet. 2D CSS animations work in Safari 4 (Leopard), Chrome 3, Safari Mobile, Shira and other Webkit browsers. Safari 4 (Snow Leopard) supports 3D animations.

Conclusion

Right now, JavaScript bridges the gap until CSS 3 comes into full effect. Unfortunately, getting full browser support for these great properties will be a long journey. Until that day comes, we can take advantage of some serious progressive enhancement and rely on JavaScript to enhance our websites and applications. That’s not a bad thing; just how it is at the moment.

With the recent announcement of IE9, I wouldn’t be surprised if the IE team include some of these properties in the new version of the browser especially since talks for CSS3 integration have already begun (border-radius).

The future of the Web is bright, especially with these highly experimental properties such as animation. Although many of the properties are not usable for client or high-level production work, they sure are fun to play with! We can all look forward to the day when we have support across the board to build some really great lightweight applications.

References And Resources

We express sincere gratitude to Andy Clarke and Hugh Isaacs II for corrections to this article.

(al)

CSS,

↑ Back to top

Tim Wright is the Senior User Experience Designer and Developer at Fresh Tilled Soil, a UX design agency out of Boston, MA.

Tim is a frequent speaker, blogger, article writer, and published author. In fact, he recently wrote a book on JavaScript: Learning JavaScript: A Hands-On Guide to the Fundamentals of Modern JavaScript. You can find more of his writings at CSSKarma

  1. 1

    Seems great to think of, but until older browsers still exist. :)

    0
  2. 2

    Very interesting article. And i agree, JavaScript bridges the gap until CSS 3 comes into full effect. We can all hope the IE team include some of these properties in the new version of the browser. :)

    0
  3. 3

    Just a note, in IE8 (when not in standards mode) it’s required that you type “-ms-filter” instead of just “filter” in your CSS (it’s apart of them being standards compliant now ^_^).

    And aside from that “-moz-transition” already works in the latest nightly build of Firefox 3.7 (so it’s guaranteed for the future), oh and CSS animations work fully in Safari 4, Chrome 3 and Safari mobile, not just the nightly builds of WebKit.

    0
  4. 4

    This really shows how the future of css might evolve into a more powerful language resembling javascript in it’s capabilities. Incorporating more complicated, 3 dimensional properties into css objects in web pages. If the browser can read jQuery it should be able to read a more complicated set of css instructions as a standard not as a ” kit “. All modern browsers should be able to do the same things instead of having a different set of instructions for every browser.

    0
  5. 5

    We need to see more articles like this from Smashing Magazine.

    Maybe one explaining why (and how) you can start using these properties now.

    0
  6. 6

    Scaling in Internet Explorer can be done with zoom: 1.1, but the result is not very pretty.

    And with the MSIE Matrix filter (http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx) you can specify any desired rotation angle, not just 90/180/270°

    You should probably wait with implementing transformations for the “real” web, because implementations are buggy (certainly the MSIE filters). Also, the specifications for transformations are still changing so the implementation in a future browser version could very well be different than a current implementation.

    0
  7. 7

    better to check this as well

    http://www.blendernation.com/css-transform-exporter-for-blender/

    (for blender heads out there and for freaks as well)

    0
  8. 8

    It should also be pointed out that Internet Explorer also has a Matrix filter with allows for rotation and skewing.

    Paul Bakaus wrote a jQuery plugin to automate the process:
    http://paulbakaus.com/2008/08/16/bringing-css-transform-to-internet-explorer/

    0
  9. 9

    Excellent information!

    0
  10. 10

    Very interesting article. Thank you, Tim.

    0
  11. 11

    I’ve been playing with MS matrix filter to achieve rotation for IE in my $dom javascript library. The problem I found is, It’s terribly slow when you use it on more than a couple of objects unlike the Firefox / WebKit implementations. In MS’ defence IE’s filters are years old now.

    Perhaps we’ll get a performance boost with IE9′s DirectX acceleration. Then again, I always thought the ‘DX’ in ‘DXImageTransform’ meant DirectX.

    0
  12. 12

    Unfortunately the “multiple backgrounds” link from the introduction of this article is broken!

    0
  13. 13

    Just to be clear, Microsoft ‘filters‘ or ‘extensions‘ are not part of the development of the CSS 2D Transforms Module. They are not part of the developing standard. I recommend that everyone avoid using them.

    This will to help influence Microsoft to adopt the new standard properties, because sites will look less rich in their browser. Hacking around IE by using Microsoft proprietary CSS will only slow down their adoption of CSS3.

    Design around browser differences, don‘t hack around them.

    0
  14. 14

    Great article Tim.

    But I do agree with @AndyClarke here, we shouldn’t encourage Microsoft’s bad habits.

    I personally encourage my clients to use Firefox, Safari, Chrome or Opera (basically anything but…). Hopefully their diminishing market share will bring them into the fold.

    0
  15. 15

    as always, IE is still 2 years back in development…good article though, thanks!

    0
  16. 16

    Excellent article. Finally an article from Smashing Magazine that’s worth reading. Unique, different, and very well explained. Nice job! :)

    0
  17. 17

    ‘The name “translate” is a little misleading’ – Are these “transformations” not derived from mathematics in which you can rotatate, reflect and translate along a Cartesian Plane?

    0
  18. 18

    @Chaim

    0
  19. 19

    Hey guys, thanks for all the comments, additions, and kind words. When releasing an article like this I always look forward to the feedback!

    0
  20. 20

    I do like the articles that are exposing the potential of CSS3 but I have not heard a real comment on the reality of ever being able to use CSS3. IE6 is here a while … I don’t ever come across web projects that exclude any of the IE browsers. This is just a fact. So while these new styles are nice, they don’t be bit of good…at all. The day Microsoft gets on anybody’s band wagon but their own, I will be very surprised. I don’t think they give a damn about standards or the way the rest of the industry is moving. I don’t have any faith CSS3 will be useful till 2025. That really really sucks.

    0
  21. 21

    very usefully…and give more experience

    0
  22. 22

    in your opening any word’s “…multiple background images…” i think that link broken. May be….thanks before if i false

    0
  23. 23

    Why do you tell people what is okay to use and what isn’t?

    0
  24. 24

    love reading the comments people have left here. so many valid points being made.

    0
  25. 25

    Great Article! Unfortunately, looks like we will still have to handle IE6 till 2014, the official date from when Microsoft will stop support for it. That’s ages in Internet Lifetime. Also, I see more compatibility challenges coming up with the platforms becoming more diverse from just your regular computer monitors. We are also going to be seeing the same site on different platforms including mobiles, HDTVs, netbooks, etc. Resolution diversity seems to be the next big challenge on the horizon.

    0
  26. 26

    Wow powerful stuff – I like!

    0
  27. 27

    CSS3 is what I’ve been waiting years for. Even though it is here now because of IE I will still have to wait years to implement it on pretty much anything other than personal sites.

    Here’s to many more years banging my head on the IE wall of pain and suffering…

    0
  28. 28

    What’s wrong with using Javascript for animations? And what is the advantage of using CSS? There’s always a big fuss about separating content and style, but style and behaviour should be separated, too.

    0
  29. 29

    Great article as usual Tim! I look forward to using CSS animations in the future.

    @Scott There is nothing wrong with using Javascript for animations but from the standpoint of optimization and performance I would prefer passing off some of the load to CSS.

    0
  30. 30

    ‘The name “translate” is a little misleading’
    No it isn’t: that is the correct mathematical term for a change of position – there was no need to invent a new term, and I can’t think of a better-known one, can you?

    0
  31. 31

    Hi B uddy. CSS – case cading style sheet is very important on coding communication…. thanks for css message to initial developers.

    0
  32. 32

    Just a quick note to say that the recently released pre-alpha of Opera 10.50 supports CSS transforms and transitions.

    0
  33. 33

    Very cool CSS3 Tim, thanks for sharing. I find, the more we try and release these functional advancements in CSS the more our clients tend to let go of early browser degradation, and are way more leanient when pages are “boring”.

    0
  34. 34

    David Siegfried

    May 7, 2010 6:23 am

    My concern has been mentioned. What happens when I have a stylesheet full of animations and transitions all over the place. Pretty soon I have the same sort of unsorted garbage as we had back when we had table based layouts with font tags. Right now I see no reason with all the success of javascript libraries like jquery why we should try to cram our functionality into our “style”sheets. Not to poo poo on this as it is cool, it seems sort of anti the standard age of web design.

    0
  35. 35

    Smashing Editorial

    December 19, 2009 7:19 am

    Thank you, Hugh. The article was updated!

    0
  36. 36

    How exactly is using Microsoft proprietary CSS any different than using mozilla proprietary CSS or WebKit proprietary CSS? Say what you want, but none of them are “standards” yet.

    0
  37. 37

    Hi Andy,
    I would normally agree, but I think you may have missed the point of the article a little. It’s not a “best practices” sort of thing; it’s a “if you want to use this, here’s how you have to do it right now”. If you’ll notice, I don’t really advise using this unsupported stuff for major design & UI elements as they won’t degrade well.

    I don’t think we should deny people information just because it’s for only IE. There’s nothing wrong with creating an IE style sheet and putting your stuff in there.

    0
  38. 38

    Jewen Soyterkijns

    December 19, 2009 2:49 pm

    One of the best articles! Especially fancied the support and caveats of each technique. I’d love to read more stuff like this: written with care and a practical background.

    0
  39. 39

    I was about posting it myself…;)

    0
  40. 40

    It’s funny, for years Microsoft have supported transformations via the matrix filter and developers avoided using them because the effects didn’t work in other browsers. Now that other browsers are supporting transformations via a different CSS syntax (as Matt points out all still proprietary) were being encouraged to avoid using them in IE.

    0

↑ Back to top