CSS for Web Development

0% completed

Previous
Next
Quiz
Question 1
Which of the following is the correct syntax for applying a transition that affects background-color over 0.5 seconds using an ease timing function?
A
transition: background-color 0.5s ease;
B
transition: background-color, 0.5s, ease;
C
transition: 0.5s ease background-color;
D
transition: ease 0.5s for background-color;
Question 2
What does the transition-delay property do in the context of CSS transitions?
A
It extends the duration of the transition.
B
It pauses the animation completely on hover.
C
It specifies the amount of time before the transition starts after a state change.
D
It sets the order in which multiple transitions run.
Question 3
Given the following code, what is the total time elapsed before the opacity change begins on hover?
.card {
  opacity: 1;
  transition: opacity 0.4s ease 0.2s;
}
.card:hover {
  opacity: 0.5;
}
A
Immediately starts a 0.4-second transition with no delay.
B
0.2 seconds delay, then a 0.4-second transition (total 0.6s).
C
0.4 seconds delay, then a 0.2-second transition.
D
No change in opacity will be visible because the delay cancels the transition.
Question 4
Examine the following CSS. What animation effect is being created?
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.box {
  opacity: 0;
  animation: fadeIn 2s ease-in-out forwards;
}
A
The box will continuously fade in and out.
B
The box will fade from fully opaque to transparent.
C
The box remains hidden because opacity is reset at the end.
D
The box will fade in from complete transparency to full opacity over 2 seconds.

.....

.....

.....

Like the course? Get enrolled and start learning!
Previous
Next