demo-container { display: block; border: 2px solid rgb(189, 189, 189); padding: 25px 10px 10px; border-radius: 4px; width: 300px; }
demo-object { display: inherit;  }

.element {timeline-trigger-source: scroll();}
.container {
width: 260px;
padding: 1rem;
border: 1px solid #ccc;
border-radius: 12px;
margin-bottom: 2rem;
overflow-y: scroll;
height: 140px;
}

.inner { height: 400px; padding-top: 200px; }

flex-flex {
width: 100%;
height: 60px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
margin-bottom: 1rem;
animation-fill-mode: both;
animation-play-state: running;
}

@keyframes fade-blue {
from { opacity: 0; transform: translateX(-20px); background: #E6F1FB; }
to   { opacity: 1; transform: translateX(0);     background: #85B7EB; }
}

@keyframes fade-green {
from { opacity: 0; transform: scale(0.8); background: #E1F5EE; }
to   { opacity: 1; transform: scale(1);   background: #5DCAA5; }
}

/* source: view() — triggers based on element visibility in scroll container */
.box-1 {
timeline-trigger-name: --t1;
timeline-trigger-source: view();
timeline-trigger-range: entry 20%;
trigger-scope: --t1;
animation: fade-blue 1s ease forwards;
animation-trigger: --t1 play-forwards play-backwards;
}

/* source: scroll() — triggers based on scroll position of the container */
.box-2 {
timeline-trigger-name: --t2;
timeline-trigger-source: scroll();
timeline-trigger-range: 20% 80%;
trigger-scope: --t2;
animation: fade-green 1s ease forwards;
animation-trigger: --t2 play-forwards play-backwards;
}