React中code标签CSS旋转动画不生效问题求助

问题原因 #

code 标签默认是行内元素，CSS的transform属性无法作用于行内元素，而h1属于块级元素，因此动画能正常运行。

解决方案 #

给code标签添加display: inline-block或display: block属性，使其成为可应用transform的元素类型。修改后的CSS代码如下：

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
  animation: spin 3s linear infinite;
  /* 添加该行让元素支持transform */
  display: inline-block;
}

若希望code标签占满整行，替换为display: block即可。

修改后，旋转动画就能正常在code标签上生效。

内容的提问来源于stack exchange，提问作者Sri12866