几秒钟后改变背景颜色一次答案

【问题标题】：change background color once after few seconds几秒钟后改变背景颜色一次
【发布时间】：2014-06-23 10:42:51
【问题描述】：

是否可以在几秒钟后（10 到 20 秒）使用 css fiddle 更改 <p> 元素的背景颜色？我不想用js。

<p style="background:#E1FEE0;">Human</p>

【问题讨论】：

使用动画和关键帧查看this example。

标签： css background-color css-animations

【解决方案1】：

其实你可以。您应该使用 CSS 动画来实现这一点。 Here's CSS 声明示例：

@-webkit-keyframes change-color {
  0%   { background-color: red; }
  100% { background-color: green; }
}
@-moz-keyframes change-color {
  0%   { background-color: red; }
  100% { background-color: green; }
}
@-o-keyframes change-color {
  0%   { background-color: red; }
  100% { background-color: green; }
}
@keyframes change-color {
  0%   { background-color: red; }
  100% { background-color: green; }
}

.animated {
  -webkit-animation: change-color 2s infinite; /* Safari 4+ */
  -moz-animation:    change-color 2s infinite; /* Fx 5+ */
  -o-animation:      change-color 2s infinite; /* Opera 12+ */
  animation:         change-color 2s infinite; /* IE 10+ */
}

在JSFiddle 上试试这个。

更多阅读，here's CSS 动画链接。

【讨论】：

【解决方案2】：

使用 CSS 动画，您可以从 99.9% 跳转到 100%。只需在99.9% 中设置初始背景颜色（#E1FEE0），然后在100% 中设置最终背景颜色。如果您希望颜色过渡，只需增加间隙并将80% 用于example。

Example Here

p {
    display: inline;
    animation: background-fade 10s forwards;
}

@keyframes background-fade {
    99.9% {
        background:#E1FEE0;
    }
    100% {
        background:#000;
    }
}

为简单起见，省略了其他供应商前缀。

【讨论】：

@Beginner 只有动画属性..不是关键帧。看到这个example。
@Beginner：不。如果必须，您可以将其放在<style></style> 中。