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

CSS3 First Look

Animating CSS properties


From:

CSS3 First Look

with James Williamson
Expand all | Collapse all
  1. 3m 5s
    1. Welcome
      1m 20s
    2. Using the exercise files
      1m 45s
  2. 31m 30s
    1. What is CSS3?
      5m 26s
    2. The current status of CSS3
      3m 35s
    3. An overview of CSS3 capabilities
      2m 24s
    4. Can you use CSS3 now?
      5m 31s
    5. Detecting support for CSS3
      9m 0s
    6. Understanding vendor prefixes
      5m 34s
  3. 1h 9m
    1. An overview of child and sibling selectors
      3m 11s
    2. Using child and sibling selectors
      7m 17s
    3. An overview of attribute selectors
      3m 19s
    4. Using attribute selectors
      8m 32s
    5. Pseudo-class UI selectors
      5m 56s
    6. Negation pseudo-class selectors
      6m 48s
    7. Target pseudo-class selectors
      5m 39s
    8. Structural selectors
      3m 58s
    9. Nth-child selector syntax
      10m 0s
    10. First, last, and only structural selectors
      5m 39s
    11. Using structural selectors to write more efficient code
      8m 52s
  4. 45m 28s
    1. Color formats in CSS3
      7m 9s
    2. Transparency in CSS3
      9m 10s
    3. CSS3 gradients
      4m 11s
    4. Creating linear gradients
      13m 57s
    5. Creating radial gradients
      11m 1s
  5. 49m 8s
    1. Working with web fonts
      6m 38s
    2. @font-face syntax
      4m 52s
    3. Downloading sample fonts
      6m 5s
    4. Writing @font-face declarations
      7m 57s
    5. Using web fonts
      6m 42s
    6. Using text shadows
      7m 14s
    7. Creating multi-column text
      9m 40s
  6. 50m 55s
    1. An overview of the flexible box model
      4m 42s
    2. Controlling box orientation
      5m 2s
    3. Setting element flexibility
      12m 59s
    4. Distributing boxes
      7m 54s
    5. Controlling box alignment
      12m 38s
    6. Working with box-sizing
      7m 40s
  7. 1h 5m
    1. Using border-radius
      6m 20s
    2. Creating custom rounded corners
      10m 21s
    3. Understanding border images
      5m 15s
    4. Using border images
      8m 52s
    5. Creating box shadows
      8m 58s
    6. CSS3 backgrounds
      4m 55s
    7. Controlling background size
      8m 46s
    8. Creating multiple background images
      6m 4s
    9. Using background-origin
      3m 18s
    10. Clipping background content
      3m 2s
  8. 40m 8s
    1. An overview of CSS3 2D transforms
      4m 26s
    2. Using 2D transforms
      8m 16s
    3. Setting transform origins
      5m 24s
    4. An overview of CSS3 transitions
      5m 0s
    5. Animating CSS properties
      6m 12s
    6. Using easing in animations
      5m 41s
    7. An overview of 3D transforms
      5m 9s
  9. 37m 56s
    1. Understanding media queries
      6m 18s
    2. Strategies for targeting multiple devices
      6m 4s
    3. Writing styles for target screen sizes
      12m 11s
    4. Deploying styles through media queries
      3m 55s
    5. Basing media queries on page orientation
      2m 24s
    6. Targeting media queries for iOS devices
      7m 4s
  10. 1m 6s
    1. Goodbye
      1m 6s

Video: Animating CSS properties

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.

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...
CSS3 First Look
6h 34m Appropriate for all Nov 29, 2010

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.

Topics include:
  • Understanding the history of CSS3
  • Working with the new selectors
  • Adding transparency and gradients
  • Specifying web fonts with @font-face
  • Understanding the advances to page layout
  • Looking at CSS3 box model capabilities
  • Using 2D and 3D transforms
  • Understanding media queries
Subject:
Web
Software:
CSS
Author:
James Williamson

Animating CSS properties

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.


Expand all | Collapse all
Please wait...
Q: I'm following along with the video "Transparency in CSS3".  James shows us how to achieve transparency in Internet Explorer by going to Kimili.com and entering a HSLA value to generate code for transparency.

Here that code:

background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF0E0C0B,endColorstr=#BF0E0C0B)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF0E0C0B,endColorstr=#BF0E0C0B); /* IE6 & 7 */ zoom: 1;

When this code is added to my HTML file it removes transparency on browsers that do in fact support it. So I'm left with NO transparency. Why?
A: The problem is in the filter code. If the IE background is called last, the first "transparent" declaration will remove all previous colors, regardless of browser. To resolve this, place the rule inside a conditional comment for IE or remove the "transparent" declaration at the front of the rule.
Share a link to this course
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.

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 CSS3 First Look.

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


OK

Course retiring soon

CSS3 First Look will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


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
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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