1

を使用して、メモリの問題に直面しています-webkit-animation。

原理

グラデーションの背景をアニメーション化したい。キーフレームではアニメーション化できないため、各背景を異なる に配置し、それらの不透明度とdivで遊んでいます。divz-index

  • .item010% から 4% まで表示され、0% でフェードアウトし始めます
  • .item02.item010% から 8% まで表示され、4% (および 未満)でフェードアウトし始めます。
  • .item03.item020% から 12% まで表示され、8% (および 未満)でフェードアウトし始めます。
  • ...

問題

最初の 16 個のアニメーションのみが機能し、17 番目には、すべてのアニメーションが再開されるまで空の div が表示されます。

-moz-animationと Firefox の使用に問題がないことに気付きました。この問題は Chrome でのみ発生し、 -webkit-.

ビューポートのサイズに応じて、アニメーションを多かれ少なかれ表示できます。

コード

HTML

<div class="item item-01">ITEM 01</div>
<div class="item item-02">ITEM 02</div>
<div class="item item-03">ITEM 03</div>
...

CSS

.item {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 1;
}
.item-01 { 
  background: red; 
  z-index: 100; 
  -webkit-animation: item01 30s linear infinite;
}
.item-02 { 
  background: blue; 
  z-index: 96; 
  -webkit-animation: item02 30s linear infinite;
}
.item-03 { 
  background: red; 
  z-index: 92; 
  -webkit-animation: item03 30s linear infinite;
}
...
@-webkit-keyframes item01 { 0%, 100% {opacity: 1;}  4%, 99.999% {opacity: 0;} }
@-webkit-keyframes item02 { 4%, 100% {opacity: 1;}  8%, 99.999% {opacity: 0;} }
@-webkit-keyframes item03 { 8%, 100% {opacity: 1;} 12%, 99.999% {opacity: 0;} }
...

例として、グラデーションの背景を単純な赤/青の背景に置き換えました。

このコードを機能させる方法はありますか?

EDIT
最近の発見に続いて、質問を更新しました：

  • 表示されるアニメーションの数は OS によって異なります (Ubuntu は Win7 よりも良い結果を出しているようです)
  • 表示されるアニメーションの数は、ビューポート サイズによって異なります
4

2 に答える 2

1

解決策は、それぞれにアニメーションを持つ 2 つの div のみを持つことだと思います。

最初の div のアニメーションは、背景をロードし、不透明度 0 に移行し、背景を変更し、不透明度 1 に移行し、不透明度 0 に移行し、背景を変更します。

2 番目の div のアニメーションも同じですが、背景は偶数です

于 2013-10-20T19:43:44.393 に答える