2

モバイル Web サイトの css3 読み込みアニメーションを作成しています。ローダーは、次の HTML / CSS を使用して問題なく動作します。

HTML:

<div class="loader"></div>

CSS:

    .loader {
    background-color: rgba(0,0,0,0);
    border: 6px solid rgba(0,0,0,0.75);
    opacity: 0.5;
    border-top: 6px solid rgba(0,0,0,0);
    border-left: 6px solid rgba(0,0,0,0);
    border-radius: 60px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    width: 60px;
    height: 60px;
    margin: 0 auto;
    -moz-animation: spin 1s infinite linear;
    -webkit-animation: spin 1s infinite linear;
}

    @-moz-keyframes spin {
        0% { -moz-transform:rotate(0deg); }
        100% { -moz-transform:rotate(360deg); }
    }

    @-webkit-keyframes spin {
        0% { -webkit-transform:rotate(0deg); }
        100% { -webkit-transform:rotate(360deg); }
    }

ただし、モービル サファリでアニメーションを表示すると、ページがスクロールまたはタッチされるとアニメーションが一時停止します。ユーザーがページをスクロールしている場合でも、アニメーションを継続する方法はありますか?

ありがとう！

4

1 に答える 1

2

私はこれが現在可能であるとは思わない。この副作用を回避するには、独自のスクロール実装を行う (またはフレームワークを使用する) 必要があります。私は推測しますが、より技術的な洞察を歓迎します-これは、ネイティブスクロールとCSSアニメーションの両方がGPU制御をめぐって競合するためです-どちらもそれを持つことができません

于 2012-11-16T20:08:25.723 に答える