未应用 CSS 动画

Question

我正在尝试将动画应用于 SVG 元素中的组。但是，我发现它没有应用或被覆盖，因为它在 Chrome 开发人员工具中被划掉了。也就是说，我不知道是什么原因造成的。

动画代码:

.ghost {
  animation: float 3s ease infinite;
}

@keyframes float {
  50% {
     transform: translate(100px, 100px);
  }
}

我会发布 HTML(可能存在问题)，但由于所有 SVG 路径，它非常冗长。改为链接到 Codepen:ghost

非常感谢!目前我不知道是什么导致了这个问题。

Answer 1

您缺少供应商前缀。示例:

.ghost {
  -webkit-animation: float 3s ease infinite;
}

@-webkit-keyframes float {
  50% {
     -webkit-transform: translate(100px, 100px);
  }
}

为了轻松修复，请尝试在 CodePen 的 CSS 编辑器中添加 Prefix-free。这是启用了Prefix-free:

Codepen