何时在 CSS 中使用前缀

Question

好的，我想我有以下动画关键帧：

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
  }

  100% {
    transform: none;
  }
}

如何确保此动画与大多数现代浏览器兼容？？
我的意思是我如何知道，在关键帧之前我必须应用多少个前缀？？
我在哪里寻找哪些浏览器支持关键帧但只有前缀？？
以及哪些浏览器支持这个不带前缀的属性。

我找到了一个不错的网站：can i use

但是现在我如何以最有效的方式从这个站点中提取哪些属性在带前缀和不带前缀的浏览器中受支持？？

我扫描了，但没有问这个问题，即使它是一个非常重要的问题，我在 sublime text 中使用 Emmet，它也处理前缀，但有时这些前缀可能会过时，尤其是随着浏览器支持的增加，所以我真的很想了解自己并更好地控制自己。

如果对我的问题有任何疑问，请参考问题的标题。

编辑 ::

只是为了澄清一点，假设我有一个这样的简单图表：

（上图取自caniuse.com）。

现在我如何确定哪些浏览器需要前缀，哪些不需要。

顺便说一句，关于使用 JS 插件和使用 grunt 的答案听起来都很棒，但这对我来说有点高级。

如此简单明了。我如何决定手动添加哪些前缀。 ??

谢谢。

亚历山大

Answer 1

快速简单的使用Prefix free: Break free from CSS vendor prefix hell!

您也可以通过cdnjs 获得它

Answer 2

我个人使用Grunt 进行开发。它有很多很酷的功能（更少的编译，js 缩小，...），还有一个工具可以满足你的需求：Grunt Auto Prefixer。它使用“我可以使用”中的数据库，并在必要时添加前缀，甚至删除过时的前缀。您所要做的就是告诉它您想要支持哪些浏览器的版本。

如果设置正确，当您将更改保存到 css 文件时，所有操作都会自动完成，您的浏览器甚至会自动重新加载 css 而无需刷新页面。

一开始可能有点复杂，但 Grunt 并不难，而且那里有大量信息和好工具。真的值得一看！

Answer 3

您需要添加的前缀非常标准。

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
    -webkit-transform: translate3d(3000px, 0, 0);
    -o-transform: translate3d(3000px, 0, 0);
    -moz-transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
    -webkit-transform: translate3d(-25px, 0, 0);
    -o-transform: translate3d(-25px, 0, 0);
    -moz-transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
    -webkit-transform: translate3d(10px, 0, 0);
    -o-transform: translate3d(10px, 0, 0);
    -moz-transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
    -webkit-transform: translate3d(-5px, 0, 0);
    -o-transform: translate3d(-5px, 0, 0);
    -moz-transform: translate3d(-5px, 0, 0);
  }

  100% {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
  }
}

既然可以自己编码，为什么还要加载整个 js 库？！