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%;}}、Opera固有のプレフィックス付きのアニメーション（）がない場合でもそれらを適用するためです（ @-o-keyframes leftright { 0% { left: -10%; } 100%{ left: 101%;}}）。

そして、あなたが望むものを達成するための最も簡単な方法は、おそらく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と他のブラウザで確認してください）

[私のライブデモでは、JavaScriptを介して必要に応じてベンダープレフィックスを追加する-prefix-freeを使用していることに注意してください。また、コードでは、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 に答える