Question

我正在创建一个使用CSS3关键帧动画的网站。

我看过的指南建议为每个浏览器使用单独的代码，指定哪些代码用于我所使用的浏览器例如。 This guide表明：

@-webkit-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
#box {
  -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
  -moz-animation:    NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
  -o-animation:      NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
  animation:         NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */
}

And this one这表明略有不同的分组，但基本上是相同的。

但是我看过许多文章说浏览器检测在现代网页中很糟糕。

This page (same site as above)

W3C agrees但感觉css中的浏览器前缀可以例外。

是否可以使用仅查询功能支持而不是指定浏览器的方法来使用关键帧？

Answer 1

但是我看过许多文章说浏览器检测在现代网页中很难实现。

是的，浏览器检测并不是一种好的做法，因为它不可靠并且可能在（近）未来中断。

但是，您在此处所做的不是that article中所述的“浏览器检测”。您正在使用供应商前缀。

Vender前缀可以，这是可以接受的方式（实现一个仍被视为“草稿”的功能）。这是唯一的方式。

“问题”是浏览器不一定支持这种“标准”方式，即。没有供应商前缀。可能是因为他们在标准之前实现了这一点;在“最终”实施达成一致之前。与此同时，他们实现了他们认为它将如何工作并使用供应商前缀。供应商前缀规则可能与最终“标准”的工作方式不同。

因此，供应商前缀版本将始终（或暂时）在其设计的浏览器中工作。浏览器忽略所有其他供应商的前缀规则（在CSS中，如果浏览器不理解它应该忽略的东西）。当浏览器确实实现该标准并开始支持非供应商前缀规则时，那将是优先考虑的规则。

我可以在没有浏览器检测的情况下使用关键帧吗？

1 个答案: