Before you take your quiz, check your understanding of CSS transitions and animations with the practice activity below. Write a response to each question below.
What are at least two differences between transitions and animations?
What are the two pieces needed to create a transition?
Write the transition property declaration for a div that will have its background color change over a period of three seconds.
Explain the purpose of the transition-timing-function property.
Write the animation directions so that this div's background-color will change to red after 2 seconds, blue after another 2 seconds, and then to yellow after 6 seconds.
div {
animation-name: practice;
animation-duration: 10s;
}
Add two more styles to the div below so that its animation loops 2 times, and plays forward then backward.
div {
animation-name: practice;
animation-duration: 10s;
}
| Your Responses | Sample Answers |
|---|---|
| Animations can have more steps than just a start and finish, they can change direction, and they can loop. Transitions cannot. Animations also usually automatically start themselves. Transitions, on the other hand, are usually triggered by a hover effect or mouse click, and are easier to control with outside coding. | |
| The transition property must be declared, and at least one of the element's properties must take on a different value. | |
| transition: background-color 3s | |
| This property can alter the speed at different points in a transition. | |
|
@keyframes practice { 20% { background-color: red; } 40% { background-color: blue; } 100% { background-color: yellow; } } |
|
|
div { animation-name: practice; animation-duration: 10s; animation-iteration-count: 2; animation-direction: alternate; } |
|
