Home > Chapter Review and Exercises > Chapter 18 - Transitions, Transforms, and Animation
An Interactive Guide to CSS Transitions (Interactive, live examples)
CSS Transitions and Transforms for Beginners (Interactive with CodePen, live examples)
Transition - CSS-tricks (Interactive with CodePen, live examples)
Transitions & Animations (Interactive with CodePen, live examples)
CSS Transition Examples - freecodecamp (Non-interactive, live examples)
CSS 2D Transforms <== NEW
CSS 3D Transforms <== NEW
CSS Transform Property <== NEW
CSS Transform Property Part 2 <== NEW
CSS Transitions Advanced <== NEW
Chapter 18 introduces CSS properties for moving and distorting elements and adding time-based effects and animation. It is divided into three parts. First, it looks at the transition properties that smooth out style changes from one state to another (such as a hover effect). Next, it runs through all the transformation properties for moving, scaling, rotating, and skewing an element. Transformation effects can be combined with transitions, for example, to make an element smoothly move from one position to another. The chapter closes with a brief introduction to CSS animation.
In Chapter 18, you will learn the following:
Transitions
Transitions and animation, when used thoughtfully, can make interfaces more intuitive and enhance brand personality.
Transitions require a beginning state and an end state. The beginning state is how the element displays when it first loads and the end state is triggered by a state change (such as :hover, :focus, or :active).
The transition-property property identifies the CSS property to which the transition will be applied.
You can specify how long the transition should take (transition-duration) and how long to wait before the transition starts (transition-delay). Both values are provided in seconds (s) or microseconds (ms).
Timing functions (transition-timing-function) describe the way the transition behaves over time; for example, starting out slowly, then speeding up toward the end. The timing function can be plotted and customized with a Bezier curve.
Transformations
Using the transform property to rotate, relocate (translate), resize (scale), and skew an element.
How to combine transition and transform to smooth out transformations between states.
An introduction to 3-D transformation, a set of properties that makes elements look like cards floating in space.
Keyframe animation
How to set up the timing of a keyframe animation using the @keyframes rule that defines a series of keyframes and the property and value for each state.
Adding the @keyframes rule to the element to be animated with the animation properties (animation-name, animation-duration, animation-timing-function, animation-delay, and other properties).
tweening
The filling in of frames between two end state frames, common in animation.
timing function
The speed and manner in which the transition rolls out over time.
Cubic Bezier curve
A line that illustrates the change of a transition over time. Steep parts of a curve indicate a fast rate of change, and the flat parts indicate a slow rate of change. You can create custom timing functions by editing the curve and providing coordinates in the cubic-bezier() notation.
bounding box
The element box from border edge to border edge. Used to calculate percentage length values.
keyframe animation
An animation that transitions through a series of keyframe states, enabling more sophisticated control of the action.
keyframes
Frames in an animation that define the beginning or end of an animation segment.
explicit animation
Animation affects that are programmed by an author, such as keyframe animation.
implicit animation
Animation that gets triggered automatically, such as CSS transitions.
animation inspector
Tools built into Firefox and Chrome browsers to inspect and modify web animations.
18-1: Trying out transitions
You are walked through the process of adding transition effects to a set of menu buttons, including trying out a variety of values that have a dramatic impact on usability.
18-2: Transitioning transforms
In this exercise, elements are transformed (made larger and rotated) when the user hovers over them, and a transition is also applied to make the transformation smooth for a nice animated effect.
1. What is tweening?
2. If a transition had keyframes, how many would it have?
3. Write out the transition declaration (property and value) you would use to accomplish the following:
a. Wait .5 seconds before the transition starts.
b. Make the transition happen at a constant speed.
c. Make the transition last .5 seconds.
d. Make the lines of text slowly grow farther apart.
4. Which of the following can you not animate?
a. width
b. padding
c. text-transform
d. word-spacing
5. Which timing function will be used if you omit the transition-timingfunction property? Describe its action.
6. In the following transition, what does .2s describe?
transition: color .2s linear;
7. Which transition will finish first?
a. transition: width 300ms ease-in;
b. transition: width 300ms ease-out;
8. Write the transform declaration to accomplish the following:
a. Tilt the element 7 degrees clockwise.
b. Reposition the element 25 pixels up and 50 pixels to the left.
c. Rotate the element from its bottom-right corner.
d. Make a 400-pixel-wide image display at 500 pixels wide.
9. In the following transform declaration, what does the 3 value describe?
transform: scale(2, 3)
10. Which 3-D transform would look more angled and dramatic?
a. perspective: 250;
b. perspective: 1250;
11. What happens halfway through this animation?
@keyframes border-bulge {
from { border-width: 1px; }
25% { border-width: 10px; }
50% { border-width: 3px; }
to { border-width: 5px; }
}
12. Write the animation declaration you would use to accomplish the
following:
a. Make the animation play in reverse.
b. Make the entire animation last 5 seconds.
c. Wait 2 seconds before running the animation.
d. Repeat the animation three times and then stop.
e. The end state of the animation stays visible after the animation is done playing.