css - 什么时候在 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上得到它也是