Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In HTML5 First Look, author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future. Exercise files accompany the course.
Now with all the CSS3 properties that I have shown so far, transitions are the least supported, Firefox 4.0, Safari 4+, Chrome 4 and above, Opera 10.5 and above, all of those support CSS3 transitions to a varying degree. Now the transitions module's also a very recent CSS specification. It's still undergoing a lot of significant changes, so based on that, although we are going to be experimenting here in this exercise with CSS3 transitions, you should view these techniques as just that. Experimental.
Implementation is surely going to change over time and these may perform slightly differently or even not at all in the browser that you are using. For this movie, I will be testing this using Safari for the Mac version 5 and Google Chrome version 5. Ready to see what transitions can do? Let's go ahead and check them out. So go ahead and open up the main.css from the 07_08 folder and the trails.htm from the same folder, 07_08, and the main.css of course can be found in _css.
All right, let's look in our code. We have got something going on here that we have not had in previous versions of this file. If I scroll down, everything looks the same. There is our rider review, but check out what's happening now. Now after the rider review we have that form that we created earlier. So instead of having two separate pages, the form and the rider review are on the exact same page. Now you will notice that there is a div with an id of form panel surrounding the form. Currently our CSS is disabling that. It is basically just saying display: none.
So that if you test in your browser you wouldn't see it, but what we are going to do is we are going to make this to where the user can animate the form down in order to fill it out and then once they are done, the form will animate back up in the place. All right, and we are going to do this of course using transitions. So I am going to switch over to main .css and I am going to scroll down through my code, all the way down to about line 324, and here you are going to find a comment that says /*form animation styles */. So we are just going to start working from there. Okay, currently, the div#formPanel says display: none.
All right, we are going to change that, so what I want to do here is change display: none to height, and give it a defined height of 50 pixels. So it will display the first 50 pixels. Then I am going to go overflow: hidden. It's going to make sure that it only displays what can be seen within 50 pixels and then anything below that is going to be hidden. Now also I have got this div#formPanel:hover, and animations go here. So here I am going to, inside that, I am going to type in height of 700 pixels. That will display the entire form and then underneath that I am just going to keep the overflow hidden as well, just in case we have any thing sort of leak out.
So essentially, it's going to go from being 50 pixels high all the way to 700 pixels high, and we are now going to need to add some of our transitions. Let's do that using the proprietary webkit-transition-properties. Okay, so going down a little bit, I am going to type in -webkit-transition-property. So -webkit-transition-property. The property that we want to animate is height, so I am going to do height.
Now below that, I am going to type in -webkit-transition-duration and I am going to set it for a duration of 0.7 seconds. So this is going to last for 7/10 of a second, then I am going to type in -webkit-transition-timing-function. So -webkit-transition-timing-function, and here I am going to do ease-in.
So, if you have ever done any animation before, easing in and easing out is used to describe animating something by making it go faster in the beginning and then slowdown or going slow at the beginning then speeding up towards the end of it. So we are going to do an ease in, and then finally we are going to do a delay. So, -webkit-transition-delay, and the delay is going to be 0.5 seconds or half a second. Okay, so let's understand everything that's going on here. Essentially we are telling it we want to animate the height, and notice is going from 50 to 700.
We want it to occur to animation to happen over 7/10 of a second. We want to use a little bit of easing along with that to make the transition look a little bit more smooth, and then we want a delay of half a second. So, since this is set on a hover, when you hover over it, it will pause for half a second and then animate, and then when you hover off it, it will again pause for half a second and then animate. Now again rather than typing all this again, I am just going to copy it and paste it. Now the reason that we have to have these animation properties twice is that it's going to animate once on the form panel. It will animate on the hover and it has to know how to animate it back, so you could actually change those. You could have it so they animated in faster and roll back up slower.
That's really kind of up to you. So I am going to go ahead and save this. I am going to preview this in Chrome and if I scroll down my page now, at the very bottom I have a little piece of paragraph text now that says Write your own review! That wasn't there before, because it was hidden. The reason that we can see it now is because we have made that form panel 50 pixels tall, okay. So if I hover over this, notice that right there is our form. So our forms they are ready to use now, so we can start typing into it, and as soon as they get down with the form and move their mouse off of it, notice that it rolls right back up again.
So that is a really cool little technique. Now you can spice this technique up a little bit if you'd like. I am going to leave Chrome and go back into my CSS, and you can certainly do more than one property. Let me show you what I mean. What I am going to do is go up to my Form panel and right after height, I am going to give it another. I am going to give it a background color. So I am going to type in background- color, and here I am going to give it the same background color as the div tag that it sits on top of. So #e1d8b9, it's kind of that sand color the other ones are using.
However, for the hover I am going to give it a different background color. So you can change colors over time too. So here I am going to do background-color and here I am going to do b0a470. It's sort of a darker version of the same color, to be quite honest with you. Now, what do we need to do to animate the background color as well? Well, really not much. You can pass into the property value however many properties you want to animate. So right after height I am just going to add a space and I am going to type in background-color.
So you don't need any type of a comma there. Just having some whitespace between them will do the trick, so background-color. Now, if I wanted to animate these separately, I can go ahead and give other values for the background color. So if I wanted it to not take as long, I could do 0.5 seconds, just like that. I want them to be exactly the same just for sort of a smoother transition and if you don't want them to be separate, you can just use a single value on all the animation properties. So I am going to save that, preview that in my browser, this time I will use Safari just to change it up a little bit.
And now if I scroll down and hover over that, notice that not only does that now animate, but we get our background color. So maybe a little padding to help that out a little bit, so I am going to go back in here into my div form panel, I am just going to throw a little bit of padding in there as well. So maybe 10 pixels worth of padding all the way around that. Save it, test it again in Chrome. So now that shows up, but the 10 pixels worth of padding, notice that it causes me to see a little bit of the trail in there. So you just have to weak these a little bit to get them you want them.
What I will do is I will reduce the height. Since I have got 10 pixels above and 10 pixels below, I will reduce the height to 30 pixels, we will save that and we will see if that works for us, cool! Now animates into place, we get a nice background color now. The interesting thing about this is there is a little bit of a usability issue here. So if I came in and I said, you know, I went to this trail named Rip Roaring, and my name is James and then all of a suddenly you get a phone call and you do that, obviously, people are going to be, oh, where did my form go? The good news is if they mouse back over it, their information is still there, and they can keep filling it out.
Now it is still relatively new, and it's perhaps not ready for widespread use. You can see, for example, this really only works in Chrome and Safari at the moment, but transitions are certainly worth watching to see how browser support and implementation matures. As I mentioned earlier the specification is still undergoing changes, so don't be surprised to see significant changes in this area of CSS3 in the future.
There are currently no FAQs about HTML5 First Look.
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.