CSS 关键帧没有动画 (Mozilla Firefox)

Question

我正在努力学习 CSS。我尝试做一个简单的动画：使用关键帧改变跨度的背景颜色，但没有任何效果change/animate

我的代码如下所示：

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; }
}`

我使用的是Mozilla，所以我认为应该不会有任何兼容性问题。那么我的代码哪里出了问题呢？

Answer 1

1) 因为你在动画属性里放了逗号，我们需要用[=32分隔属性个方法=] 而不是逗号。

2) 如果你想改变文字的颜色，你可以使用 color 属性来改变字体的颜色，而不是 background-color 属性它将改变您网页的背景颜色。

这是我修改过的代码。你可以看看

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>

Answer 2

你的.brand1动画写的不对，需要把时长和动画分开。

这里有一个示例，其中包含您需要执行此操作的方式

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%;
   }
}

这里你的代码修改为这种方式

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


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

CSS 关键帧没有动画 (Mozilla Firefox)

No animation with CSS keyframe (Mozilla Firefox)

css

keyframe

css-animations

web-animations