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: --t view() / entry 20% exit 0%;}
.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;
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; }
}

.box-t {
timeline-trigger: --t view() / entry 20% exit 0%;
trigger-scope: --t;
animation: fade-blue 1s ease forwards;
animation-trigger: --t play-forwards;
}

.box-x {
animation: fade-green 1s ease forwards;
animation-trigger: --t play-forwards;
}


demo-panel {display: none;}