何时在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

但是现在我如何以最有效的方式从这个网站中提取哪些属性在具有前缀且没有前缀的浏览器中支持？

我扫描了这个并没有问过这个问题，即使它是一个非常重要的问题，我在崇高的文本中使用Emmet，它也会处理前缀，但是有时可能会过时，特别是在浏览器支持增加的情况下，所以我真的很想找到自己并且能够更好地控制自己。

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

编辑::

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

（上图取自caniuse.com）。

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

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

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

感谢。

亚历山大

Answer 1

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

你也可以cdnjs

获得它

Answer 2

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

如果您正确设置，当您保存对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库？！