Topics
- When & why to use animation
- Implementation: How?
- Accessibility
Implementation
CSS transitions
transition makes style changes smooth, whenever possible.transition-duration, transition-delay, transition-property, transition-timing-functiontransition and its longhands accept comma-separated lists, to create multiple transitions with different parameters for different properties.cubic-bezier() function. cubic-bezier.com allows you to generate these visually.-
transition
- transition-duration
- transition-delay
- transition-property
- transition-timing-function
Transitions convert abrupt value changes to smooth ones.
But what if we want more control?
CSS animations
- Animations are more complex than transitions but give us more control.
- We define animations with the
@keyframesrule. - We apply animations to elements with the
animationproperty. - The
animationproperty is actually a shorthand for:animation-name: Which animation to run?animation-duration: How long should each iteration last?animation-delay: Any delay before it starts?animation-iteration-count: How many times should it play? (number orinfinite)animation-timing-function: How should it progress over time?animation-direction: Should any iterations be reversed?animation-fill-mode: How should it behave before and after it’s applied?animation-play-state: Should it be paused?
- At a minimum, a name and duration is needed for an animation to play.
- All animation properties accept comma-separated lists of parameters, to apply multiple animations on the same element.
- We can monitor the progress of CSS animations via the
animationstart,animationiteration, andanimationendevents.
CSS Animations allow us to create motion that goes through any number of arbitrary states
-
animation
- animation-name
- animation-duration
- animation-delay
- animation-iteration-count
- animation-timing-function
- animation-direction
- animation-fill-mode
- animation-play-state
Showing content smoothly
Stuff that appears dynamically when the button is hovered would go here. E.g. a tooltip.
For interpolation to be possible, all intermediate values need to be representable in CSS
Showing content smoothly
Stuff that appears dynamically when the button is hovered would go here. E.g. a tooltip.
Animating CSS variables
Here no actual animation is happening because custom properties are not animatable by default.
We can however "teach" the browser how to animate them, by using the [`@property`](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) rule.
Page Laubheimer is a Senior User Experience Specialist with Nielsen Norman Group.
Video source: https://www.nngroup.com/videos/ux-animations/
Animation Progression: Easing
Easing adjusts an animation’s rate of change, so transitioning elements speed up and slow down. In the physical world, objects don’t start or stop instantaneously. Easing is a technique that makes elements move as though natural forces like friction, gravity, and mass are at work.
Easing in CSS
Easing in CSS
- Keywords:
linear,ease(default),ease-in,ease-out,ease-in-out - Custom easing:
cubic-bezier() - Abrupt steps:
steps(),step-start,step-end
Frame-by-frame animation
Frame-by-frame animation
- Laborious to create the sprite
- Laborious to make changes
- Leave as a last resort
Typing Animation
Discrete animation is useful for a variety of things, not all as laborious as frame-by-frame animation.
Here, we animate the heading to look as if it's being typed, by using two discrete animations.
JS Animation
requestAnimationFrame(function scroll() {
let html = document.documentElement;
html.scrollTop += 10;
if (html.scrollTop +
innerHeight <
html.scrollHeight) {
requestAnimationFrame(scroll);
}
});
When we want to animate something that is not a CSS property,
or even a CSS property in ways not currently possible, we can always fall back to JS animation
(this was the main way to do animation before CSS transitions and animations).
What does this do?