@keyframes appear{from{opacity:0;scale:0}to{opacity:1;scale:1}}.block{animation:linear appear;animation-timeline:view();animation-range:entry 0% cover 30%}:root{--red:rgb(232, 88, 67);--blue:rgb(26, 84, 207);--green:rgb(36, 217, 127);--purple:rgb(157, 86, 247);--yellow:rgb(250, 201, 82)}body{margin:0;overflow-x:hidden}h1{text-align:center;font-size:60px;margin-block:30vh}.view{display:flex;align-items:center;flex-wrap:wrap;gap:auto;width:100%;max-width:1440px;margin:auto}.block:nth-child(12),.block:nth-child(13),.block:nth-child(2),.block:nth-child(20),.block:nth-child(3),.block:nth-child(4),.block:nth-child(5),.block:nth-child(8){flex-grow:1}