.badge { min-width: 10em; font-family: arial; }
.badge-F { background-color: red; }
.badge-E { background-color: #FF5e00; }
.badge-D { background-color: #FFa900; }
.badge-C { background-color: #FFdd00; }
.badge-B { background-color: #E5ff00; }
.badge-A { background-color: #00b500; }
.badge-Aplus { background-color: #00FF00; 
    animation-name: Aplus; animation-duration: 4s; 
    animation-direction: alternate; animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out; }

@keyframes Aplus {
    0% { background-color: #00FF00;}
    25% { background-color: #00b500;}
    50% { background-color: #44FF44;}
    100% { background-color: #800080; color: yellow;}
}