Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding transition basics
- Working with 2D and 3D transforms
- Animating color changes
- Fading objects
- Changing the size of page elements and fonts
- Transitioning multiple properties at the same time
- Understanding keyframes and animations
- Working in the z-index
- Crafting transitions in Dreamweaver
Skill Level Intermediate
You know how in 3D movies there's always something flying at the screen, like a twirling hatchet or an asteroid? In this movie I going to show you how to build a slideshow that tosses the current graphic right at the viewer and then displays the next image just like this. We'll use a combination of the 3D scale function and the keyframes statement covered in Chapter 3. I have the about.htm file from the Chapter 4/04_01/about folder open my code editor, along with a key CSS file we will be working with, transitions.css.
So I'm going to put that right up top, and again, perspective is given with a series of vendor prefixes that we can copy and paste and change the vendor prefix. Now we are ready to set up our @keyframes statements. We will use just two keyframes, one of the start, 0%, where we'll set the opacity to 1, and then another at the end, 100% where we will change the opacity to 0 and also use transform scale 3D to blow the image up 5 times its normal size.
Because we are fading out at the same time as scaling up, it will appear as if the image is coming right at us. We will need to write out vendor specific versions, as well as a standard CSS3 version, changing the transform-property as needed. Let's start off with the @webkit keyframes version. So @-webkit-keyframes and then the name of our animation, which I've named goBig, and as I said, we will start at 0% with an opacity set to 1, and at 100% level, we will set the opacity to 0.
And add another rule, -webkit-transform: scale3d and then the three values. Because we are expanding it in the X, Y, and Z dimensions, and for all of them were going to scale it up 5 times. Let's copy that entire rule and then paste it again, change -webkit to -moz in both places, paste one more time, paste again, change -webkit to -o for Opera.
And then one final paste where we have removed the vendor prefixes altogether. Next, we need to call our keyframes statements with the animation property, and at the same time, set the duration and easing. We will target the class that holds the front facing image during the transition, which is called te-front.
So let's enter in our vendor-specific webkit animation property first. We will name our animation, which is goBig. Let's set the duration for .4 seconds because we want this to happen pretty quickly, and let's use a kind of nonstandard timing function, ease-in-out. All right, looks good, we can copy that, paste in our 3 versions, and make our changes.
Next, let's add in the Backface Visibility hidden declaration to cut down on redraw errors that occurs in some older browsers. And once we have one, pretty use the copy and paste that. Finally, will add another 3D property, transform style, to the te-back class, which will also help to reduce redraw errors. And once we have the rule, let's do our by now a very familiar copy/paste routine. And we have one last property to add to this, and that is to set the z-index to 1.
Let's save our CSS page and then check out the new slideshow. I'll go to my about.htm file, reload the page, and then click Next Image. Sweet! Now you can add the 3D experience to your web pages without requiring special glasses. Best of all, browsers that can't handle 3D transforms will render a straightforward slideshow, displaying the content without the enhanced effect.