Rachel walks through the solution to exercise 4.
- Let's do this little experiment together now.…And you can compare what I get with what you got.…So here we've got Tuna.…And we want him to wag his tail,…any time we hover on his tail.…So whenever we hover on his tail, he starts wagging it.…Cuz cats beat their tails against things…when they're angry with you.…I know this. I have the scars to prove it.…Initially, we've go this tail element.…That's the thing we're going to be animating, just the tail.…And we're gonna scope.…
Scope our animations to it.…We've already got a tail wag animation running.…And we want to give it an infinite iteration count.…We want it to run constantly.…Aw, it just snaps back, that looks terrible, right.…We don't want it just be like thumping down and up,…it looks unnatural.…If we set it to alternate though,…that background position is going to move…from zero percent to 100 percent over and over again.…Down here, it's gonna go back and forth, back and forth.…
Giving him that wonderful kind of pendulous tail swing.…However, we don't want him to be running…
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.