.list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 10px;
    list-style: none;
    width: 400px;
    height: 400px;
    color: #fff;
    counter-reset: num;
}
.list li{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-height: 150px;
    font-size: 30px;
    background:slateblue;
    opacity: 0;
    transform: scale(.3);
    animation:show .8s forwards;
    transform-origin: left top;
}

.list li:after{
    counter-increment: num;
    content: counter(num)
}
.list li:nth-child(2n + 1) {
    background: tomato
}
.list li:nth-child(3n + 2) {
    background:royalblue
}
.list li:nth-child(9n + 3) {
    background:violet
}
.list li:nth-child(7n + 4) {
    background:tan;
    color: #000;
}
.list li:nth-child(11n + 5) {
    background:yellowgreen
}
/*animation-delay*/

.list li:nth-child(9n + 1) {
    animation-delay: 0s;
}
.list li:nth-child(9n + 2),.list li:nth-child(9n + 4) {
    animation-delay: .3s;
}
.list li:nth-child(9n + 3),.list li:nth-child(9n + 5),.list li:nth-child(9n + 7) {
    animation-delay: .6s;
}
.list li:nth-child(9n + 6),.list li:nth-child(9n + 8) {
    animation-delay: .9s;
}
.list li:nth-child(9n + 9) {
    animation-delay: 1.2s;
}

@keyframes show{
    to {
        opacity: 1;
        transform: scale(1);
    }
}