Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
It's time to add some animation to our transforming thumbnails. Along the way, we'll explore the transition properties and discuss how to animate multiple properties at once. So I have the gallery.htm opened from the 07_05 folder, and I am also going to be working with the main.css which is found in the _css folder of the same directory. Speaking of that, I'm going to switch over to my styles and scroll down to around line 930. Let me show you what we're going to be doing here with transitions.
We're going to be setting transitions on the element that we want to transition, in this case the thumbnail, not the hover. Essentially, you set a transition on an element and basically, if any change occurs to that element, the properties that you've listed in the transition will animate. So we don't need to specify this in multiple places and we don't need to specify which interactions we want to perform the transition. We place it on the element itself and then any change to it animates it. So the first thing I'm going to do is create a new line within this selector and I am going to do my Mozilla transition.
Now I'll tell you what, the hardest thing about this is not writing transform or writing transition when you are just supposed to write transform, so keep those in mind. Now, we're going to do all these separately at first, then we'll combine it with shorthand notation in just a moment. So, I'm going to do -mozilla-transition- property and what I am going to do is transform. So the property that I want to transition is the transform-property. Interesting, huh? So I'm going to go down to the next line. Actually, you know what, let me copy and paste that. It seems to work out better for me when I do that.
I just need to replace mozilla with webkit and I need to go ahead and get rid of the third vendor prefix altogether. By now, you're probably pretty comfortable doing that. Now in addition to which property, I need to tell it how long the animation should be. So in this case, I'm going to do moz-transition -duration and we'll animate over one second. The first animation won't be quite that long, but it'll give us an idea of what that can do for us. So copy that, paste it a few times, change that to webkit, get rid of the other vendor prefix, and save the file.
Okay, let's go ahead and test that. Now, when I hover over this, I see not only do I get a scale, I get an animation as well. How cool is that? Now, you'll notice that there's a little bit more going on here with our thumbnails than we've had in the past. Essentially, I've added another paragraph underneath the image, which is still inside the div tag, and then styled the thumbnail a little bit on the hover. The style on the hover adds the rounded corners to the bottom and gives us the drop shadow, things like that.
All right, now we'll modify a little bit more because it's still the basic level styling right now, but you get the idea of kind of where this is going to be going. We've got more than one property that really needs to animate. We're going to be having colors changing, we're going to change the height of our thumbnails, all this in addition to the scaling of it as well. So remember, if we wanted to, we could go ahead and start adding comma-separated lists. We could add multiple properties. We could do all the stuff, but using the shorthand notation is probably the easiest and best way to do this.
So what I'm going to do is I'm going to eliminate all the transition-durations I have here and then I'm going to get rid of the -property and just make it webkit-transition, mozilla- transition and then just transition. Now I need to pass shorthand notation. Remember the first thing I'm going to pass in is which property or properties I want to animate, and it's only going to animate the properties that change. So I can go ahead and safely use the all keyword here, and then after that I'm going to do 0.5 seconds, 0.5 seconds. Copy that and paste it in our other items.
So essentially what this is doing is saying hey, if any property changes, doesn't matter what it is, whether it's the transform, the height, the width, whatever, if any property changes, go ahead and animate that for me and I want you to do it over half a second, so a little bit quicker. I want to point something out about this. You know when we save this and we test it, there is some visual effect here that I'm really not liking very much. I don't like the text already being there. To me, it takes away from the thumbnails. I'd really like the text to just sort of appear when somebody hovers over it and that's really the only time it needs that particular caption.
So I'm going to go back and modify my selectors to make this happen. Now the images themselves are around 100 pixels tall. So what I am going to do is I am going to back to this thumb rule and underneath the width, I am going to add a height of 102 pixels. That's going to count for the border of the image as well around the image, and then I am going to go down to the bottom here and just give it overflow of hidden. Why would I do overflow at the bottom? That's just me. Now what that's going to do for us is we are not going to get scrollbars.
We are not going to get overflowed content. If it can't fit within that 102 pixel height, it's just not going to show. In this case, the paragraph below it certainly doesn't fit within that 102. So it sort of clips it off if you will. Now if I go into the hover state, now I can change some things here. So if I go into the hover state, what I am going to do is go ahead and give it a height of 130 pixels. That's going to give me enough room for both the thumbnail and the text and then I'm going to choose overflow: visible.
That way in case I made a mistake, I can still see the text. So I'm going to save that, preview it, and now you can see we don't see any text at all, but if we hover over this now the text is coming into view, cool! And the 130 degree height is giving us a little bit of room between the bottom of the paragraph and the thumbnail, and we don't really have to worry about setting padding to do that. A little bit of extra height is doing that for us. We are almost finished with our animation. In our next movie, we're going to experiment with our transform-timing-function in order to make the animation look a little bit more natural, and we're going to change this text a little bit so that its appearance is not quite as jarring.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.