CSS transitions
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which shorthand property creates smooth property changes over a specified duration?
2. Is transition-duration: 3; a valid declaration for a 3-second transition?
3. Which property defines the pace or acceleration curve of a transition effect?
4. What happens if transition-duration is completely omitted from a transition configuration?
5. Can you configure a delay before a transition animation starts using transition-delay?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1transition: opacity 0.5s; | AWaits 2 seconds before starting the transition effect animation. | |
| 2transition-delay: 2s; | BApplies a transition effect to the opacity property lasting half a second. | |
| 3Specifies that all animatable properties will transition smoothly. | Ctransition-property: all; | |
| 4Configures a transition to maintain a constant speed from start to end. | DInvalid because transition durations require a time unit like 's' or 'ms'. | |
| 5transition: width 2; | EInvalid because ease-in is a timing function, not a time duration value. | |
| 6transition-duration: ease-in; | Ftransition-timing-function: linear; |
C
Definitions
transition
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
.box {
__________: opacity 2s;
}
2.
.card {
___________________: 0.5s;
}
3.
.btn {
___________________: transform;
}
4.
.link {
________________: 1s;
}
5.
.panel {
transition-timing-function: ____;
}
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
.item {
B
transition = width 1s;
C
background: red;
D
}
Question 2
A
.img {
B
width: 200px;
C
transition-duration: 0.5;
D
opacity: 1;
E
}
Question 3
A
.nav transition: color 0.2s; {
B
background: black;
C
}
Question 4
A
.alert {
B
opacity: 0;
C
transition: opacity 1s;
D
transition-delays: 0.5s;
E
}
Question 5
A
.badge {
B
transitioning: transform 2s;
C
transform: scale(1.1);
D
}
Answer Key
CSS transitions
Section A: Quick Questions
Q1
A — transition
Q2
A — No, it must end with 's' or 'ms'
Q3
A — transition-timing-function
Q4
B — It defaults to 0s and executes instantly
Q5
B — Yes
Section B: Match the Pairs
Q1
transition: opacity 0.5s; → Applies a transition effect to the opacity property lasting half a second.
Q2
transition-delay: 2s; → Waits 2 seconds before starting the transition effect animation.
Q3
Specifies that all animatable properties will transition smoothly. → transition-property: all;
Q4
Configures a transition to maintain a constant speed from start to end. → transition-timing-function: linear;
Q5
transition: width 2; → Invalid because transition durations require a time unit like 's' or 'ms'.
Q6
transition-duration: ease-in; → Invalid because ease-in is a timing function, not a time duration value.
Section C: Definitions
Q1
transition — A CSS shorthand property used to control the animation speed when changing CSS properties.Section D: Fill in the Blanks
Q1
.box {
transition: opacity 2s;
}Q2
.card {
transition-duration: 0.5s;
}Q3
.btn {
transition-property: transform;
}Q4
.link {
transition-delay: 1s;
}Q5
.panel {
transition-timing-function: ease;
}Section E: Spot the Error
Q1
B — Line 1 is incorrect because CSS declarations must separate properties from values using a colon (:), not an equals sign (=).
Q2
C — Line 2 is incorrect because transition-duration requires a time unit such as 's' (seconds) or 'ms' (milliseconds). A unitless number is invalid.
Q3
A — Line 0 is incorrect because style rules like transition must be declared inside the selector's opening curly brace.
Q4
D — Line 3 is incorrect because the property name is singular: transition-delay, not transition-delays.
Q5
B — Line 1 is incorrect because transitioning is not a valid CSS property name. Use transition instead.