Rachel spends a few minutes demonstrating how to transition the color of the ball in the previous exercise from one color to another. She also talks briefly about optimizing the animation by adjusting when multiple animations are running.
(mystical music)…- So I want you to try to transition…the ball's color, not using all.…Okay, so as I was walking around the room,…I noticed that somebody on a computer…very similar to my own,…was having a little bit of shaky movement in their ball…as it was rolling across the screen and changing color.…And I was fascinated by this.…It's like, this is a simple transition, why is it so janky?…And I looked closely, and he was using transition all.…
And then when he showed me the same animation…with two different statements for the transition,…the jank just disappeared completely…and the ball moved smoothly across the page.…Let me see if I can try to recreate that for you.…So first off, we are going to...…Ah, Rachel, you didn't even, ah, (gasps).…Hang on a moment.…I'm gonna leave this page.…Here we go, I'll just work with this one.…
That link, mmm, no good.…This one's much better.…So, what I'm gonna do here is…I've got the background changing…and I've got it set to transition all.…I'm gonna move it, let me change this view to this one.…
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 46s Beginner
Design the Web: SVG Rollovers with CSSwith Chris Converse23m 47s 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.