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

我正在努力学习CSS。我试着做一个简单的动画：通过使用关键帧改变跨度的背景色，但不改变/设置动画

我的代码如下所示：

HTML:

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

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

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

2） 如果要更改文本的颜色，请使用color属性，该属性用于更改字体的颜色，而不是background color属性，它将更改网页的背景颜色

这是我对其所做更改的代码。你可以看看

正文{
保证金：0；
填充：0；}
布兰德先生1{
显示：块；
字号：2em；
宽度：10vw；
动画：测试1s无限；
}
@关键帧测试{
来自{color:tomato；}
至{颜色：紫色；}
}

---

Test

您的

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

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


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