Project 25: Chat App Interface
CSS Stylist
Builds on these lessons
Step 1 of 3
Project
Animating on Scroll into View
Give new .message elements animation: fadeIn linear and animation-timeline: view() — instead of running on a fixed clock, the animation's progress is now tied directly to the element's position as it scrolls into the message list's viewport. No JS scroll listener required.
🎯 Your Task
Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.message {
animation: fadeIn linear;
animation-timeline: view();
}