No animation with CSS keyframe (Mozilla Firefox)

Question

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?

score 0 · Accepted Answer · answered Nov 07 '19 at 10:25

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>

score 0 · Answer 2 · answered Nov 07 '19 at 10:34

The animation of your .brand1 is not correctly written, you need to separate the duration and the animation.

Here a sample with the way you need to do it

p {
   animation-duration: 25s;
   animation-name: slidein;
}

@keyframes slidein {
   from {
       margin-left: 100%;
       width: 300%;
   }
   75% {
       font-size: 300%;
       margin-left: 25%;
       width: 150%;
   }

   to {
       margin-left: 0%;
       width: 100%;
   }
}

Here your code modified for this way

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


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

No animation with CSS keyframe (Mozilla Firefox)

2 Answers2