0

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

@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;
  }
}

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

我找到了一个不错的网站：我可以使用吗

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

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

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

编辑 ：：

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

浏览器支持

（上图取自caniuse.com）。

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

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

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

谢谢。

亚历山大

4

3 回答 3

1

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

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

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

于 2015-01-22T10:37:27.147 回答
1

快速简单的使用Prefix free：摆脱 CSS 供应商前缀的地狱！

你也可以在cdnjs上得到它

于 2015-01-22T10:28:32.817 回答
1

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

@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 库？！

于 2015-01-22T11:20:48.587 回答