什么css属性可以动画

Question

什么css属性可以动画？看起来内容属性是我想不能动画的thouse之一。 Code pen link

有没有其他方法可以在没有javaScript的情况下做我想做的事情？内容是actully字体图标，我试图有一个很好的GIF动画（但使用图标字体）。

<div></div>

div:after {
  position: absolute;
  top: 0;
  left: 0;
  animation: test 1s infinite;
  content: "foo"
}

@keyframes test {
  0%, 100% {
    content: "foo";
  }
  50% {
    content: "bar";
  }
}

Answer 1

正如KBM在此处评论的是所有可动画属性的列表

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Answer 2

您也可以将CSS从中删除，并使用this.

之类的内容为div设置动画