html - 如何使元素的背景颜色具有动画效果？

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 年中期完全删除前缀可能是安全的。