Property Test 2

@property --c1 {
    syntax: "<color>";
    initial-value: transparent;
    inherits: true;
}
@property --c2 {
    syntax: "<color>";
    initial-value: transparent;
    inherits: true;
}
 
.box {
    width: 400px;
    height: 400px;
    background: linear-gradient(to bottom, var(--c1), var(--c2));
    animation: sky 10s linear infinite;
}
@keyframes sky {
0%, 10%, 80%, 100% { --c1: #003; --c2: #000; }
15% { --c1: #105; --c2: #ccf; }
20%, 60% { --c1: #bdf; --c2: #9cf; }
70% { --c1: #800; --c2: #fc5; }
}