css - `animation-fill-mode: none;` 不工作

Question

根据 https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode , animation-fill-mode: none; 不应在动画开始前将第一帧的样式应用于元素。但是，animation-fill-mode: backwards 应该。

但是在这个demo在下面的代码中，似乎 none 正在做 backwards 应该做的工作。为什么？

/* I have autoprefixer enabled */
div {
  width: 100px; 
  height: 100px; 
  background-color: red;
  transform: translate(0, 0);
  animation: someAnimation 1s linear 1s;
  animation-fill-mode: none;
  -webkit-animation-fill-mode: none;
}

@keyframes someAnimation {
  0% {
    transform: translate(50px, 50px);
  }

  100% {
    transform: translate(100px, 100px);
  }
}

Answer 1

1. 你在第一个语句中拼错了 animation-fill-mode
2. 您没有为动画和过渡属性设置 -webkit- 前缀，也没有启用无前缀，因此未提供 webkit

一旦你fix those他们应该以不同的方式工作