No animation with CSS keyframe (Mozilla Firefox)

I'm trying to learn CSS. I tried to do a simple animation: changing the background color of a span by using keyframes, but nothing change/animate

My code looks like this :

HTML :

    <span class="brand1">Test</span>

CSS :

`body{
    margin: 0;
    padding: 0;}

.brand1{
     display: block;
    font-size: 2em;
    width: 10vw;
    -moz-animation: test, 2s, infinite;
    animation: test, 2s, infinite;

}
#header{
    width: 100%;
    background-color: teal;
}

@keyframes test{
    from {background-color: tomato; }
    to { background-color: violet; }
}

@-moz-keyframes test{
    from {background-color: tomato; }
    to { background-color: violet; }
}`

I use Mozilla, so I think that there shouldn't be any compatibility issues. So where is the problem in my code?

1) Because you have put commas in animation property, we need to separate property methods by using space and not by commas.

2) If you want to change the color of text you use color property which is used to change the color of fonts and not the background-color property it will change the background color of your webpage.

Here is the code I have made changes to it. You can have a look.

body{
    margin: 0;
    padding: 0;}

.brand1{
     display: block;
    font-size: 2em;
    width: 10vw;
    animation: test 1s infinite;

}


@keyframes test{
    from {color: tomato; }
  to { color: violet; }
}

 <span class="brand1">Test</span>