css - 如何在 Opera 中禁用 css 动画关键帧？

Question

我使用 CSS3 transform 和 animation 功能创建了一个动画。现在我想禁止动画在 Opera 上显示。

当我删除歌剧特定代码时 (@-o-keyframes leftright { 0% { left: -10%; } 100%{ left: 101%;}}) 从 css 来看，动画不会在 Opera 上自行禁用。

但是当我删除默认动画代码时(@keyframes leftright { 0% { left: -10%; }100%{ left: 101%;}})它在 Opera 上会自动禁用.

我想在不删除默认代码的情况下在 Opera 上禁用它。

这是代码

@keyframes leftright {  0% { left: -10%; }100%{ left: 101%;}}
@-moz-keyframes leftright { 0% { left: -10%; }  100%{ left: 101%;}}
@-webkit-keyframes leftright {  0% { left: -10%; }  100%{ left: 101%}}
@-o-keyframes leftright { 0% { left: -10%; } 100%{ left: 101%;}} 

有没有办法完成这件事？

Answer 1

首先，您应该始终将未加前缀的关键帧放在最后。

这意味着你应该:

@-moz-keyframes leftright { 0% { left: -10%; }  100%{ left: 101%;}}
@-webkit-keyframes leftright {  0% { left: -10%; }  100%{ left: 101%}}
@-o-keyframes leftright { 0% { left: -10%; } 100%{ left: 101%;}} 
@keyframes leftright {  0% { left: -10%; }100%{ left: 101%;}}

---

回答你的问题，你描述的原因是因为 Opera 支持无前缀的关键帧动画 并且将应用它们(@keyframes leftright { 0% { left: -10%; }100%{ left: 101%;}})，即使 Opera 特定的前缀动画( @-o-keyframes leftright { 0% { left: -10%; } 100%{ left: 101%;}} ) 丢失了。

实现您想要的最简单方法可能是 use a selector hack只针对 Opera(我只选择适用于 Opera 9.5+ 的原因是旧版本无论如何都不支持关键帧动画，无论有前缀还是无前缀)并在为该浏览器添加动画后删除动画所有浏览器。

例如，如果您有类似 <div class='boo'></div> 的内容在 HTML 中，那么你需要在你的 CSS 中有这样的东西:

.boo {
  position: absolute;
  width: 5em; height: 5em;
  background: blue;
  animation: leftright 5s linear 5; /* set animation for all browsers */
}
noindex:-o-prefocus, .boo { /* remove animation just for Opera */
  animation: none;
}

working demo

(在 Opera 和其他浏览器中比较)

[请注意，我的现场演示使用的是 -prefix-free它通过 JavaScript 根据需要添加供应商前缀，并且在 您的 代码中您仍然需要为 WebKit 动画添加前缀 - 有关带/不带前缀的浏览器支持的更多信息，请始终查看 caniuse.com ]