Question

我正在尝试迭代颜色（或背景图像），但它似乎不起作用。我尝试了以下内容，但它只迭代一次而不会继续。

.landing-background {
    background-color: red;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}


/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {background-color:red; }
    25%  {background-color:yellow; }
    50%  {background-color:blue; }
    75%  {background-color:green; }
    100% {background-color:red; }
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; }
    25%  {background-color:yellow; }
    50%  {background-color:blue; }
    75%  {background-color:green; }
    100% {background-color:red; }
}

Answer 1

您可能正在使用其他浏览器而不是Internet Explorer。尝试添加：

-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */

编辑：
访问Can I Use: Css-Animation，查看哪些浏览器支持css动画（带前缀）。现在每个浏览器都支持这个没有前缀的浏览器，但不是每个人都可能更新了他们的浏览器。在2017年中期完全删除前缀可能是安全的。

如何使元素的背景颜色动画？

1 个答案: