demo-container { display: block; border: 2px solid rgb(189, 189, 189); padding: 25px 10px 10px; border-radius: 4px; width: 200px; overflow: auto; height: 209px; }
demo-object { display: block; width: 100px; height: 100px; background: red; margin: 100px auto; animation-name: fadeGrow; animation-timeline: scroll(); 
animation-range-end: entry 10% ; animation-fill-mode: both; }
.element{ animation-range-end: exit 90%;}
@keyframes fadeGrow { 
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1.5); }
}