New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

HTML5 First Look
Illustration by

Using CSS3 transitions


From:

HTML5 First Look

with James Williamson

Video: Using CSS3 transitions

Although it's long been accepted that CSS and HTML work together to separate structure and presentation, a third category of behavior has largely been the responsibility of JavaScript. Although pseudo-selectors like hover and focus have allowed us to change styling based on user interactivity, for larger animations and behaviors we have had to rely on JavaScript for the heavy lifting. With the advent of CSS3, we now have the ability to utilize transitions to make simple animations and stylistic changes based on user interactivity, all within our styles and all without using JavaScript. These are really cool. I think you are going to like them.
Expand all | Collapse all
  1. 3m 56s
    1. Welcome
      1m 1s
    2. Using the exercise files
      1m 50s
    3. Who is this course for?
      1m 5s
  2. 21m 12s
    1. Exploring prior standards
      4m 26s
    2. Why do we need HTML5?
      3m 32s
    3. HTML5 timeline
      4m 24s
    4. Current HTML5 support
      4m 25s
    5. What HTML5 is (and what it isn't)
      4m 25s
  3. 27m 49s
    1. HTML5 vs. HTML4
      3m 25s
    2. New structural tags
      6m 1s
    3. New content tags
      4m 7s
    4. New application-focused tags
      5m 32s
    5. Deprecated elements
      4m 28s
    6. API overview
      4m 16s
  4. 22m 29s
    1. Content models
      5m 33s
    2. Understanding the outline algorithm
      3m 21s
    3. The role of ‹div› tags
      4m 20s
    4. Using ID and class attributes
      2m 6s
    5. DOCTYPE declarations
      4m 16s
    6. Character encoding
      2m 53s
  5. 41m 27s
    1. Basic page structure
      3m 40s
    2. Structuring top-level elements
      7m 30s
    3. Structuring interior content
      8m 42s
    4. Building headers
      9m 11s
    5. Checking document outlines
      5m 46s
    6. Ensuring cross-browser structure
      6m 38s
  6. 27m 53s
    1. New input types
      5m 57s
    2. Setting form autofocus
      2m 53s
    3. Using placeholder data
      4m 4s
    4. Marking required fields
      3m 24s
    5. Working with number inputs
      5m 49s
    6. Using date pickers
      5m 46s
  7. 1h 1m
    1. Canvas overview
      6m 21s
    2. Adding canvas content
      8m 58s
    3. Drawing in the canvas environment
      12m 9s
    4. Drag-and-drop API overview
      6m 18s
    5. Offline applications overview
      7m 11s
    6. Video overview
      5m 45s
    7. Encoding video
      8m 23s
    8. Adding video
      5m 58s
  8. 57m 33s
    1. Geolocation API overview
      5m 50s
    2. Web storage API overview
      5m 40s
    3. WebSockets overview
      4m 16s
    4. CSS3 overview
      6m 38s
    5. Enhancing typography with CSS3
      7m 42s
    6. Using @font-face
      7m 11s
    7. Styling HTML5 with CSS3
      10m 23s
    8. Using CSS3 transitions
      9m 53s
  9. 5m 6s
    1. Final thoughts
      3m 49s
    2. Goodbye
      1m 17s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
HTML5 First Look
4h 28m Beginner Aug 23, 2010

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.

Topics include:
  • Understanding the history of HTML5
  • Using new tags
  • Understanding HTML5 semantics
  • Coding ID and class attributes in HTML5
  • Structuring documents
  • Building forms
  • Exploring HTML5 native APIs
  • Encoding and adding HTML5 video
  • Exploring associated technologies such as CSS3
Subjects:
Developer Web Web Design Web Development
Software:
HTML
Author:
James Williamson

Using CSS3 transitions

Although it's long been accepted that CSS and HTML work together to separate structure and presentation, a third category of behavior has largely been the responsibility of JavaScript. Although pseudo-selectors like hover and focus have allowed us to change styling based on user interactivity, for larger animations and behaviors we have had to rely on JavaScript for the heavy lifting. With the advent of CSS3, we now have the ability to utilize transitions to make simple animations and stylistic changes based on user interactivity, all within our styles and all without using JavaScript. These are really cool. I think you are going to like them.

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.

So it's up to you to decide whether that's usability issue or not. So I am just going to go back in the code really quickly, so that you can see this again. This is really simple to do. You are just using the webkit-transition properties. We are doing property, duration, timing-function and delay. Again, property tells it which properties to animate, duration tells it how long to animate it, timing-functions tell it if you want to any easing or how do you want to animate it, and the delay means how long should I pause before I actually animate? So CSS3 transitions are really cool. They allow you to perform really powerful animations and transitions that until recently we couldn't have done that without using JavaScript.

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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5 First Look.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.