Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Exploring animation delay and the fill-mode property

From: CSS: Animations

Video: Exploring animation delay and the fill-mode property

In the last tutorial, we animated our unicycle rider across the screen. It was fun but pretty basic. Lucky for us, there are additional properties that give us a deeper level of control over our animations and let us give them a little more polish too. In this tutorial we'll look at properties like animation-delay and animation-fill-mode and how they can give us more control over how our unicycle rider moves. Right now our animation starts playing as soon as we load our page. What if we didn't want the animation to start playing right away? That's where the animation-delay property comes in handy. Let's go over to Coda to edit the CSS for this example.

Exploring animation delay and the fill-mode property

In the last tutorial, we animated our unicycle rider across the screen. It was fun but pretty basic. Lucky for us, there are additional properties that give us a deeper level of control over our animations and let us give them a little more polish too. In this tutorial we'll look at properties like animation-delay and animation-fill-mode and how they can give us more control over how our unicycle rider moves. Right now our animation starts playing as soon as we load our page. What if we didn't want the animation to start playing right away? That's where the animation-delay property comes in handy. Let's go over to Coda to edit the CSS for this example.

And you can follow along with this example from the exercise files for this tutorial, or you can work with the files you created last time around. Either one will have you starting in the same place. So let's add an animation-delay to our unicycle rider animation. We'll add one additional property here called animation-delay, and we'll set that delay 2 seconds. That seems like a nice long enough time that we'll notice. So if we save our CSS now and go back and preview our animation in our browser, we'll refresh the page, and we will notice nothing happens for the first 2 seconds and then our animation executes just like it did before.

Now we've got a nice pause before the action of our animation starts. You might have also noticed that when our unicycle rider got to the end of the animation, he jumped back to his original position. I think I'd rather have him stay at the end off to the right when the animation completes the motion. To do this, we'll need to take a look at the animation-fill-mode property. Animation-fill-mode can take on one of four values, none, backwards, forwards, or both. Let's take a look at a couple of simple ball animations to demonstrate what animation fill mode can do. None is the value by default if you don't declare the property at all, just like this ball example here.

With the animation-fill-mode of none, it just hops back to its original position once the animation has finished. This default behavior is pretty awkward looking. When the animation is over, the target of the animation returns to its intrinsic styles and the animation styles no longer apply. That's not always what we really want to happen. If we go to Coda and look at the CSS behind this ball animation, we can make some adjustments to change how this looks. If we explicitly set our animation-fill-mode to forwards, our ball will maintain the styles from the last executed keyframe of the animation after the animation has finished.

In this case, that will mean our to keyframe which is the last one and the current animation we are using. So if we save our CSS now and go preview this animation once more with just that one property added, we'll refresh the page, and now we'll see that our ball stays at the end and maintains those styles from our last keyframe once the animation is complete. It's looking a lot better. Now let's take a look at the animation-fill-mode value of backwards. And to do that, I'm going to go back to Coda and just change the animation our ball is using to better demonstrate the behavior.

So edit our animation name assignment to take on the other animation we have in our file, the first one we have listed, called move-left-right. And you might notice that the keyframes for this animation are defined using percentages, which is our other option besides from and to. We'll be working with percentage keyframes later in this course as well. As you can probably guess, the reason we use percentage keyframes is that we can have more than just two. While the keywords from and to are really handy, they limit us to two keyframes, and sometimes we need more than that. So that's where percentages come into use.

With our animation changed, I'm also going to uncomment this animation delay and remove our fill-mode line for now, so we can see what happens with no fill-mode assigned. So we'll save the CSS and preview our ball animation now. When we refresh the page, you will notice there's a jump at the very beginning of our animation where the ball jumps to the 0% keyframe position and then there is another jump at the end. So we have just made this ball animation really, really awkward. Because during the delay it stays in one place then it jumps to the first keyframe of our animation, and then it jumps back when the animation is done.

So let's assign an animation-fill-mode of backwards. We'll save this and then preview to see how this changed things. So with the animation-fill-mode of backwards, our ball will take on the styles from our 0% keyframe, the first keyframe in our animation during that animation delay that we set. So if we go back to our browser and preview, you will see that our animation now starts in the 0% keyframe position, instead of its original position off to the left. Of course we are still getting that jump at the end of our animation, and that's where the animation-fill-mode of both comes in handy. So if we go back to Coda, we'll change this animation-fill-mode to both.

And then we'll preview our ball animation one last time. Things are looking a whole lot better. Our animation stays in the 0% keyframe position during the animation delay at the beginning. And then once the animation is over, it keeps the styles from our final keyframe as well. So that's the animation-fill-mode of both. It takes advantage of both the behaviors of forwards and backwards. So now that we looked at animation-fill-mode in detail, let's go back to our unicycle rider animation and see how it can help us out there. So we'll go back to Coda, and we'll open up the style sheet for our unicycle animation.

It's just how we left it off. We have our animation delay set of 2 seconds, and now let's add an animation-fill-mode property to really round out this animation. Just like the last ball example that we looked at, we have a delay, so we're definitely going to want to use the fill-mode of backwards. But we also want our unicycle rider to stay off to the right when it's done, which is technically the behavior of the animation fill-mode forwards. So I think we want to use the animation-fill-mode of both here so that way we can take advantage of the animation-fill-mode of both before the animation starts and after. So, with that one line changed, let's save our CSS and go back to look at our unicycle animation.

We'll refresh the page, you'll see we still have our delay. And the animation executes, and when it's done our animation stays right off to the right where we left it. So the animation-fill-mode of both and the delay have really added to this animation. Just to quickly recap how the animation-fill-mode works, the animation-fill-mode of backwards takes effect before the animation starts, and it applies the styling from the first executed keyframe during any animation delay. The animation-fill-mode of forwards applies styling from the last executed keyframe of your animation after the animation has completed.

And the animation-fill-mode of both gives you both behaviors. So that is how animation-fill-mode can really round out your animation and create behaviors that are probably a lot more like what you're looking for.

Show transcript

This video is part of

Image for CSS: Animations
CSS: Animations

29 video lessons · 12742 viewers

Val Head
Author

 
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. 24s
    1. Next steps
      24s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.

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 ?

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