Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
With robust and ever-increasing browser support, it is now possible to take advantage of expressive CSS3 capabilities across modern browsers. In this course, Joseph Lowery explores the possibilities of the new coding options, which animate well over 50 different properties automatically or interactively, and how they open the door to enhanced user experiences. This course covers the range from simple to complex transitions, including 2D and 3D transforms, and illustrates how transitions are expedited in various web authoring tools, as well as Dreamweaver. The course also contains a start-to-finish interactive slideshow project that allows you to practice and see the transitions and transforms immediately in action.
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.
There are currently no FAQs about CSS: Transitions and Transforms.
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.