Join Rachel Nabors for an in-depth discussion in this video Course resources and summary, part of Motion Design with CSS.
(upbeat techno music)…- Let's go back into Chrome, because Chrome did tap.…They're gonna have some super, super cool animation…tools at Chrome Dev Summit this year.…Hang on, hang on, we can do this.…I don't want you there anymore, I want you here.…There you go, that's better.…Thank you, Chrome.…Thank you for listening to me.…I don't want to see timeline.…I want to go to-- have to hit escape…and then go to animations.…I'm just gonna make this one bigger, if I can.…
There we go.…Oh, I can't.…So anyway, (mumbles).…There we go.…Making the animations really big.…Now I'm gonna refresh it.…So check it out.…You see these little things happening down here?…These are actually collections of animations.…They let you skip between them.…So as I'm-- when I click this to go down, this should result…in another set of animations.…This tool may or may not be handy to you in your workplace.…But the idea is that you can jump back into that animation…and have access to its timeline.…
See how I'm moving her forward and backward and her…screaming and kicking?…
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?
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.