Question

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

Answer 1

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

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

这是我对其进行更改的代码。你可以看看。

<Container maxWidth="lg" className="container-padding">
    ...
</Container>

.container-padding {
  padding: 30px;
}

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）

2 个答案: