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编辑器中添加无前缀。这是无前缀启用：

Codepen