CSS是否有任何预定义的动画？

Question

所以我刚刚看到了question，其中op定义了一个名为flash的动画。它会在我测试过的所有浏览器（Chrome和Firefox-最近都更新）中引起奇怪的行为：

我输入的动画值将被忽略，而是该块以黄色淡入淡出-有点像闪光灯。

这是我所看到的屏幕截图：

我找不到关于预定义CSS动画的任何信息，而且似乎也无法覆盖它们。

这是代码段：

.block {
  height: 100px;
  width: 100px;
  background-color: red;
}

.flash {
  animation: flash 2s infinite;
}

@keyframes flash {
  0% {
    background-color: blue;
  }
  50% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}

.notFlash {
  animation: notFlash 2s infinite;
}

@keyframes notFlash {
  0% {
    background-color: blue;
  }
  50% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}

<div class='block flash'>Flash Animation Name</div>
<div class='block notFlash'>A Different Animation Name</div>

这是怎么回事？是否存在诸如预设动画之类的东西？

我找不到任何谷歌搜索内容。

Answer 1

StackOverflow使用以其自己的样式命名的动画。由于StackSnipppet不在沙盒中，因此此样式将覆盖您在代码段中定义的样式。

以下代码片段显示了控制台输出中正在使用的动画，以指示新项目已记录到控制台：

let i = 0

setInterval(() => {
  console.log(++i)
}, 1000)

如果您尝试a different snippet tool或在本地运行代码，您会发现情况并非如此。

有关更多信息，请参见post on meta（在评论中由esqew链接）。