In animation, easing or cushioning describes an animation’s rate of change over time. CSS transitions include a transition-timing-function property which allows developers to specify the type of easing to apply to the transition. Rachel uses the websites cubic-bezier.com and easings.net to better demonstrate the various timing functions.
- Timing functions.…Now things are going to get exceedingly fun for us.…So a falling ball picks up speed due to gravity…and a rolling ball slows down from friction.…These are natural, physical ways…that things around us respond to the laws of our universe.…Now easing is a way of showing…those sorts of changes and rates of change.…It's also known as cushioning, back in studio animation.…
They describe an animation's rate of change over time.…Let me show you a little bit about what this means.…For instance, deceleration is actually ease-out.…Ease-out can be thought of as accel-…ease-in can be thought of as acceleration.…That's what those words mean,…I'll tell you a quick way to remember them in a moment.…So ease-out, ease-in, these are two default CSS values,…we also have one called linear.…Linear describes a constant rate of change.…
In the wild it's very rare to find anything…with a constant rate of change that is not man made.…Pretty much everything is speeding up or slowing down,…even the universe is speeding up…
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.