如何用CSS3按特定周期动态修改样式？代码测试无效求助

当然可以通过CSS3的@keyframes动画实现按特定时间间隔更改样式的动态效果，你测试的代码未生效主要有以下问题：

• 关键帧规则重复定义：你在@-webkit-keyframes里两次写了50%的样式，后定义的规则会覆盖前一个，导致动画逻辑异常；
• 私有前缀兼容性问题：仅使用-webkit-前缀，无法适配不依赖该前缀的现代浏览器，标准语法才是当前主流支持的写法。

修正后的代码示例 #

如果需要实现白色与黑色按1秒间隔交替保持的效果，可使用以下代码：

/* 定义标准关键帧动画 */
@keyframes blackWhite {  
  0%, 50% { background-color: white; }
  51%, 100% { background-color: black; }
}

.blinkdiv {
  height: 100px;
  background-color: black; /* 设置初始背景色 */
  /* 应用动画：名称 时长 无限循环 */
  animation: blackWhite 2s infinite;
}

代码说明 #

1. 关键帧0%, 50%表示动画前1秒（总时长2秒的前半段）保持白色，51%, 100%表示后半段保持黑色，实现固定时间间隔的样式切换；
2. 使用标准animation简写属性，替代零散的动画属性，同时省略过时的私有前缀，确保兼容绝大多数现代浏览器；
3. 如果需要更平滑的过渡效果，可调整关键帧的百分比值，或添加animation-timing-function属性自定义过渡节奏。

内容的提问来源于stack exchange，提问作者Luís