0

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

当我从 css 中删除 Opera 特定代码 ( @-o-keyframes leftright { 0% { left: -10%; } 100%{ left: 101%;}}) 时，动画不会在 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%;}}

有没有办法完成这件事？

4

2 回答 2

6

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

这意味着您应该拥有：

@-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%;}}，并且即使@-o-keyframes leftright { 0% { left: -10%; } 100%{ left: 101%;}}缺少Opera 特定的前缀 ( ) 也会应用它们 ( )。

实现你想要的最简单的方法可能是使用选择器黑客来定位 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;
}

工作演示

（在 Opera 和其他浏览器中查看）

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

于 2013-03-21T07:47:32.657 回答
1

尝试 ：

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

有时您不需要为它工作的精确前缀。因此，您需要将值更改为none.

于 2013-03-21T07:53:24.590 回答