CSS伪元素旋转动画无法运行，请求排查原因

嘿，我立马就发现问题所在啦！

你遇到的这个情况，核心原因是：CSS的transform属性对默认是inline类型的元素不起作用，而::before伪元素的默认display值就是inline，这就导致你的旋转动画完全没效果——但直接给div（块级元素）加动画就正常，因为块级元素支持transform。

解决办法很简单，只需要给伪元素设置一个支持transform的显示类型就行，比如inline-block或者block：

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

.spinning::before {
  content: 'x';
  animation: spin 2s infinite linear;
  /* 关键修复：让伪元素成为行内块级元素 */
  display: inline-block;
}

除此之外，你也可以用position: absolute、float: left这类属性，它们同样会改变伪元素的显示特性，让transform能够生效。

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