没有 CSS 关键帧动画（Mozilla Firefox）答案

【问题标题】：No animation with CSS keyframe (Mozilla Firefox)没有 CSS 关键帧动画（Mozilla Firefox）
【发布时间】：2019-11-07 18:34:45
【问题描述】：

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

我的代码如下所示：

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，所以我认为不应该有任何兼容性问题。那么我的代码中的问题在哪里？

【问题讨论】：

标签： css css-animations keyframe web-animations

【解决方案1】：

1) 因为你在动画属性中放了逗号，所以我们需要用空格而不是逗号来分隔属性方法。

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

 &lt;span class="brand1"&gt;Test&lt;/span&gt;

【讨论】：

【解决方案2】：

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

这里是您需要的示例

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

【讨论】：