.animate-color-once,
.animate-color-forever,
.animate-color-forever-good {
margin: 0 auto;
width: 100px;
height: 100px;
background: blue;
}

.animate-color-once {
animation: an-color 3s linear;
}

.animate-color-forever {
animation: an-color 3s linear infinite;
}

.animate-color-forever-good {
animation: an-color-good 3s linear infinite;
}

@keyframes an-color {
from {
background: blue;
}
to {
background: green;
}
}

@keyframes an-color-good {
0% {
background: blue;
}
50% {
background: green;
}
100% {
background: blue; /* 归位 */
}
}

.animate-color-once,
.animate-color-forever,
.animate-color-forever-good {
margin: 0 auto;
width: 100px;
height: 100px;
background: blue;
}

.animate-color-once {
animation: an-color 3s linear;
}

.animate-color-forever {
animation: an-color 3s linear infinite;
}

.animate-color-forever-good {
animation: an-color-good 3s linear infinite;
}

@keyframes an-color {
from {
background: blue;
}
to {
background: green;
}
}

@keyframes an-color-good {
0% {
background: blue;
}
50% {
background: green;
}
100% {
background: blue; /* 归位 */
}
}