css - 为什么动画内容在 Firefox 中不起作用？

Question

为什么以下动画在 Chrome 中有效，但在 Firefox 中无效？

HTML:

<button>Loading</button>

CSS:

button {
  width: 70px;
  text-align: left;
}

button:after {
  content: '';
  animation: dots 1s infinite;
}

@keyframes dots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

Playground

Answer 1

因为规范不允许 content to be animated .