3

CSS3 アニメーションの特定の部分を順方向に実行した後、逆の順序で実行しようとしています。

私が取得しようとしている部分は、50% から 100% までのキーフレームが前進した後に逆向きになることです。

fallA、fallB、fallC、fallD、fallE の順に 5 つのアニメーションがあり、fallE が完了したら、fallE、fallD、fallC、fallB、fallA に移動する必要があります。ただし、100% から 50% のキーフレームのみです。

CSSまたはjavascript / jqueryでこれを行う方法はありますか?

アニメーションコードは次のとおりです。

    .animated.fallA{
        -moz-animation: fallA 1s forwards ease-in-out;
        -webkit-animation: fallA 1s forwards ease-in-out;
        animation: fallA 1s forwards ease-in-out;
    }
    .animated.fallB{
        -moz-animation: fallB 1.2s forwards ease-in-out;
        -webkit-animation: fallB 1.2s forwards ease-in-out;
        animation: fallB 1.2s forwards ease-in-out;
    }
    .animated.fallC{
        -moz-animation: fallC 1.4s forwards ease-in-out;
        -webkit-animation: fallC 1.4s forwards ease-in-out;
        animation: fallC 1.4s fowards ease-in-out;
    }
    .animated.fallD{
        -moz-animation: fallD 1.6s forwards ease-in-out;
        -webkit-animation: fallD 1.6s forwards ease-in-out;
        animation: fallD 1.6s forwards ease-in-out;
    }
    .animated.fallE{
        -moz-animation: fallE 1.8s forwards ease-in-out;
        -webkit-animation: fallE 1.8s forwards ease-in-out;
        animation: fallE 1.8s forwards ease-in-out;
    }
    @-moz-keyframes fallA{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:0;
        }
    }
    @-webkit-keyframes fallA{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:0;
        }
    }
    @keyframes fallA{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:0;
        }
    }
    @-moz-keyframes fallB{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-20px;
        }
    }
    @-webkit-keyframes fallB{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-20px;
        }
    }
    @keyframes fallB{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-20px;
        }
    }
    @-moz-keyframes fallC{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-30px;
        }
    }
    @-webkit-keyframes fallC{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-30px;
        }
    }
    @keyframes fallC{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-30px;
        }
    }
    @-moz-keyframes fallD{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-20px;
        }
    }
    @-webkit-keyframes fallD{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-20px;
        }
    }
    @keyframes fallD{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:-20px;
        }       
    }
    @-moz-keyframes fallE{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:0;
        }
    }
    @-webkit-keyframes fallE{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:0;
        }
    }
    @keyframes fallE{
        0%{
            position:relative;
            opacity:0.0;
            top:-100px;
        }
        50%{
            opacity:1.0;
            top:0;
        }
        100%{
            top:0;
        }
    }
4

4 に答える 4

2

これで試しましたか？ 

.foo{
animation-direction:alternate;
-webkit-animation-direction:alternate;
}

ここに mozilla dev ネットワークのリファレンスが
あり、ここに W3C のリファレンスがあります

于 2013-04-11T17:32:15.690 に答える
2

イーズインアウトの代わりに、イージング関数としてのキュービックベジエを見てください。 http://cubic-bezier.com

アニメーションを現在の 50% マークにする必要があり、正しいベジエを使用して「オーバーシュート」させて元に戻します。このようなもの: http://cub-bezier.com/#.29,.61,.79,3

編集：
私はあなたのアニメーションコードを十分に注意深く見ていませんでした. Bezier は、弾力性のある「オーバーシュート」効果ではなく、バウンス効果を作成しようとしているため、あなたが求めているものではありません (コードを正しく理解していれば) http://jsfiddle.net/4KwY8/1/

解決策はそれほど難しくありません。fallB、C、D のキーフレームを少し異なるように定義する必要があるだけです。css は次のようになります。

@keyframes fallB{
    0%{
        position:relative;
        opacity:0.0;
        top:-100px;
    }
    33%, 100%{
        opacity:1.0;
        top:0;
    }
    66%{
        top:-20px;
    }
}

ご覧のとおり、1/3 ポイントと 3/3 ポイントの両方に中央のキーフレームを使用しています。この変更が含まれているフィドルは次のようになります: http://jsfiddle.net/4KwY8/2/

私はこれがあなたがどこにいるのかだと思います。タイミングとキーフレームの配置に関して微調整を行う必要があるかもしれませんが、大まかなアイデアは理解できたと思います。不明な場合は、お気軽にお尋ねください。

PS: インスピレーションを得るために、さらにクールな CSS アニメーション効果をいくつかここで見つけることができます: http://daneden.me/animate/

于 2013-04-11T17:33:51.190 に答える
2

アニメーションを手作業でコーディングして、CSS 3 トランジションのすべての制限に対処するよりも、 Greensock アニメーション プラットフォーム(GSAP) などのさまざまな JavaScript トゥイーン ライブラリのいずれかを使用することをお勧めします。

これは信じられないほど強力で、遅延、ずらし、リピート、ループ、リバースなどをサポートしています。GSAP を使用すると、おそらく上記 (および必要な追加機能) を数行で書き直すことができます。

CSS 3 トランジションとの比較はこちらで確認できます。

于 2013-04-11T17:36:30.233 に答える