CSS: Animations
Illustration by Bruce Heavin

Animating the data


From:

CSS: Animations

with Val Head

Video: Animating the data

We'll be animating the other two parts of our infographic in this tutorial. We'll be doing the animations for our VS circle, as well the circles representing our data. Our VS circle drops in with a hard bounce when we make a new coffee selection, and our data circles do a sort of less severe drop in when they first appear on the page. So let's get started writing each of these animations. We'll head over to our CSS in Coda, back to our little block of animations that we've set up, and we'll start writing some new keyframes for these two animations. Let's start with the VS circle first.
Expand all | Collapse all
  1. 4m 47s
    1. Welcome
      41s
    2. What you should know before watching this course
      58s
    3. Vendor prefixes and browser support
      2m 11s
    4. Using the exercise files
      57s
  2. 28m 16s
    1. Animation basics
      6m 32s
    2. Exploring animation delay and the fill-mode property
      6m 6s
    3. Working with animation direction
      4m 49s
    4. Understanding easing
      8m 47s
    5. Challenge: Adding keyframes to our animation
      49s
    6. Solution: Adding keyframes to our animation
      1m 13s
  3. 47m 37s
    1. Creating a seamlessly looping animation
      6m 27s
    2. Animating an element into place
      5m 43s
    3. Playing and pausing an animation on hover
      6m 20s
    4. Animating 3D transforms
      8m 6s
    5. Preparing a sprite image for animation
      4m 55s
    6. Animating the sprite image with steps
      5m 34s
    7. Chaining multiple animations on one element
      8m 2s
    8. Challenge: Adding a third animation to the chain
      46s
    9. Solution: Adding a third animation to the chain
      1m 44s
  4. 19m 54s
    1. A preview of what we'll be creating
      1m 10s
    2. Setting up the HTML structure
      1m 48s
    3. Adding the header animation
      5m 57s
    4. Animating the data
      6m 8s
    5. Adding interactivity with JavaScript
      4m 51s
  5. 12m 44s
    1. Why and when to use CSS animations
      4m 50s
    2. Organizing animation code for semantics and fallbacks
      4m 51s
    3. Crafting effective animations
      3m 3s
  6. 3m 0s
    1. Helpful online tools for creating and building animations
      3m 0s
  7. 34s
    1. Next steps
      34s

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course CSS: Animations
1h 56m Intermediate Feb 14, 2013

Viewers: in countries Watching now:

This course presents a short series of CSS animation techniques, such as looping, playing, and pausing, and puts them together in a small project: an animated infographic. Author Val Head also addresses using CSS preprocessors, adding transitions, handling vendor prefixes, and understanding the best uses for CSS animations. Plus, discover how to measure the performance and current level of browser support for CSS animations and how we can expect the technology to change.

Topics include:
  • Understanding delay and fill-mode
  • Dictating an animation's direction
  • Using easing
  • Adding keyframes
  • Looping an animation
  • Chaining multiple animations on one element
  • Setting up the HTML structure
  • Adding interactivity with JavaScript
Subject:
Web
Software:
CSS
Author:
Val Head

Animating the data

We'll be animating the other two parts of our infographic in this tutorial. We'll be doing the animations for our VS circle, as well the circles representing our data. Our VS circle drops in with a hard bounce when we make a new coffee selection, and our data circles do a sort of less severe drop in when they first appear on the page. So let's get started writing each of these animations. We'll head over to our CSS in Coda, back to our little block of animations that we've set up, and we'll start writing some new keyframes for these two animations. Let's start with the VS circle first.

So we'll start our keyframe block, and I'm going to call this one bounce-in because that's very much what it's about to do. What we want to have happen is we want our VS circle to drop-in from pretty far above. We want it to fall to some position passed its intended position, then bounce up just a little bit and then fall down just a bit to its final intended position. We'll start with our 0% keyframe, and we're going to have this start very high. So we'll add a transform that translates our VS circle up pretty high, and I'm going to go with -500 pixels.

This is going to be a negative number, because we're moving upwards, and there has to be a negative value on our Y axis. Then for its first drop, maybe we'll pick 70%. We'll set another transform and have this fall passed its intended position, so we'll say 30 pixels. That will be a bit further than it's really going to end up, and then at 80% because these bounces are getting smaller, we'll add a transform that translates our VS circle just up about 10 pixels, so that will be a small bounce up, and then finally, at 100% we will add transform that translates our VS circle to 0, which is essentially the exact position it already has styles for.

So those keyframes will create our bounce effect, but I want to add just a little extra touch to this effect. So I'm going to add just a bit more space here, and I'm going to add a property to a few of our keyframes, starting with our 0% keyframe. Though a bounce-in is pretty nice, but personally, I prefer when a bounce-in also is accompanied with a slight change in opacity. So I'm going to start our VS circle being transparent and set our opacity to 0. So at the start of its bounce-in when it's making its longest fall, it will actually be transparent at the beginning. And then down here at 80%, I'm going to set the opacity to 1, and that will have it be completely opaque.

So in between 0% and 80% keyframe, our VS circle will both be changing its opacity and its position. So we'll have a nice fade-in while we're doing our bounce-in, and it makes for a nice touch to that effect. We have one last animation we need to write, and that's the drop-in animation for our circles. So, we'll start a new keyframes block, and I'm going to call this animation drop-in because that's what they're doing. Now for this drop-in, we want a movement that's less severe than our bounce-in and really we just want our circles to start a little higher up than their final position and just have one movement down.

There's no bouncing involved. So because we only need two positions, we can use the keywords of from and to, to define our keyframes. And from keyframe I'll set a transform, but I'll translate our data circles up just a tiny bit, probably about 30 pixels up from their intended position. And in our to keyframe, I'll do another transform that will translate our circles to 0, so back to their original position. Just like our bounce-in animation, I'd like to add a little opacity to this one as well.

So in our from keyframe, I'm going to add one more property and set our opacity here to 0. I'm going to do the same in our to keyframe as well, and we'll set the opacity to 1. So this way while our data circles are doing that slight drop-in, they'll also do a fade-in from being completely transparent to being completely opaque. So now with those sets of keyframes in place, let's go to assigning our animations. We'll be assigning our VS animation via JavaScript, because we want to have it play each time a selection is made from our menu.

So instead of adding the animation properties directly to our VS class, we're actually going to create a new class that we can append or remove with JavaScript later. We'll do this right up here in our animation section just to keep things all in one place. So I'm going to create a class called bounce-in, conveniently named the same as my animation. That's not required, but I like to do it that way. In this class, we're going to assign our animation properties. Of course, we're going to assign it the name of bounce-in. We'll have a duration of 0.5 seconds, because it's going to happen pretty quickly.

Our animation-timing-function will be ease-in, and we're going to have this repeat once, and we'll add a fill mode of both. Our data circle's animation will also replay each time a new selection is made. But since these HTML elements actually get removed and then re-added to the page each time a selection is made, we won't need JavaScript to trigger they're playing a second time. So we can add the animation properties directly to our data circles, and these all happen to be list items within our profile class. So we'll just scroll up here to find them, here they are, so we can add our animation properties here.

We'll assign the animation of drop-in. We'll add an animation duration of 0.25 seconds, which is pretty fast, but they're very small and they don't have far to go. We'll have an animation-timing-function of ease-out, and I'm going to set an animation delay of 0.5 seconds. Now you might have noticed that's the exact same amount of time as our VS circle duration was. So I'm going to have this animation start for all the data circles roughly right after the VS circle has ended. This timing might not be exact, but it's going to be pretty close.

Then we'll set this to repeat once and have a fill mode of both. With all that set, we can save our file and head over to our browser to preview what we've done. Now if we refresh, nothing is going to happen to our VS circle, because we need to add our JavaScript before the animation will be triggered at all. But if we scroll down and refresh, we can see that our data circles have their animation in place. So that's in good progress for this tutorial, and in the next tutorial we'll add some of that JavaScript interactivity.

There are currently no FAQs about CSS: Animations.

 
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.


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.

* Estimated file size

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 CSS: Animations.

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 ?

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 preferences from 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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.