In this exercise, you will use the animationend event to add the .sit class after Tuna is done walking.
(funky flute music)…- This is the crowning achievement of this class,…we're gonna use those animation event listeners…to listen for Tuna's animationend,…and then give him a .sit class…after that's fired.…Remember how earlier,…before we launch into this,…I do wanna make one note that is pretty interesting.…Earlier we were doing some fun things…and someone in the front here…had used a setTimeout…to change the animations class…after the three second animation had run,…by setting a three second long setTimeout on it.…
That kind of works, but it's a very brittle thing,…most of us know that a setTimeout is a code smell,…truth is, imagine a future…where people do have control…over the playback rate of their browser…and they can universally set it…to be faster or slower for their own appreciation,…then that setTimeout would fire too early or too late…and it would be really tough,…you would have messed up animations all over your site.…These fire when the animation is finished,…no matter how long it takes,…no matter whether or not some universal change…
Note: This course was created by Frontend Masters. It was originally released on 09/15/2016. We're pleased to host this training in our library.
- CSS transitions and animations
- Using animation in product design
- Creating a sprite animation with CSS
- Stateful transitions and supplemental animations
- Using developer tools to manipulate animations
- Jump cuts and in-betweening
- Static vs. dynamic animations
- Designing performant animations
Skill Level Intermediate
Design the Web: CSS Animated Rolloverswith Chris Converse29m 42s Beginner
Design the Web: SVG Rollovers with CSSwith Chris Converse23m 43s Beginner
1. CSS Transitions
2. CSS Animations
3. Animation in Design
4. Stateful Animations
- Mark as unwatched
- Mark all as unwatched
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.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.