Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the earlier movies in this chapter, you got a sampling of what Transitions and Transforms could do. Now the question is: when should you use them? To my mind, CSS Transitions and Transforms are enhancements to a site and should not be deployed to perform mission-critical tasks. Furthermore, when they are used, you have to make sure that the effects, when viewed through non-supporting browsers, degrade gracefully and appropriately. To show you what I mean, let's take a look at some examples of applying Transitions and Transforms.
First, let's take a look at a site that allows you to view movies and TV shows online. So if I click on one of the titles, Surface here, you can see we have some really nice moves happening. The background image slides up super-sized, and the box cover moves forward in front of it tilting, and lot of action here. I think it looks really good, and when we click the X to close, everything reverses itself, really super nice. If we take a look at that in another browser, let's go over to Firefox.
This version of Firefox doesn't support all the same transforms and everything, so if I click on the same item, Surface here, everything just appears. We have the same functionality, it's just without the progressive enhancement that the CSS Transitions and Transforms bring. Let's look at one more site that exemplifies graceful degradation. Go back to Safari, and this is just an example site that has a series of photos spread out kind of naturally on the screen, and when you go over one in Safari, the image rotates until it becomes perpendicular to the screen, comes forward, and even develops a nice little drop shadow.
Now when I move my mouse over it, it goes back into position. So let's go to another image like one that's completely obscured here right in the middle, and that pops forward. It has the same sort of rotation effect,, as well as the drop shadow, and again, when I go out, it reverses itself pretty nicely. So let's go over to Opera to take a look at the same site. So here when I hover over something, all I get is the image coming forward and the drop shadow. Again if I do it for this image, same thing.
So I'm getting the same result but not with the transitions and transform effects that are applied. So you still get to see the photos, they're just not presented in quite as fancy a manner. You'll get the same degree of support in Internet Explorer 9. The takeaway here is when using Transitions and Transforms, make sure to always test your pages with major browsers to ensure you are using them to enhance the user's experience whenever possible while gracefully degrading on non-supporting browsers.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.