CSS3アニメーションを実現

###まず、最も重要な2

アニメーションの二つの値：名前5S ++アニメーションCSSは、少なくとも属性

短縮形：

myfirst	5S	リニア（やす）	2S	無限（33）	代替（正常）
名	期間	タイミング機能	ディレイ	反復カウント	方向
アニメーションの名前	アニメーションの時間（デフォルト0）	一定速度（後にスローダウン）（デフォルトのしやすさ）	開始時刻（デフォルト0）	無限ループ（33）（デフォルト1）	後方（正前方に置く）（デフォルトでポジティブ）に置きます

アニメーション名	それは@keyframesアニメーションの名前を指定します。	3
アニメーションの継続時間	秒またはミリ秒の所定のアニメーションが完了1サイクルかかります。デフォルトは0です。	3
アニメーションのタイミング機能	アニメーションカーブの所定の速度。デフォルトでは「楽」です。	3
アニメーションの遅延	ときにアニメーションの規定が開始されます。デフォルトは0です。	3
アニメーションの繰り返しカウント	引当金のアニメーションが再生されます。デフォルトは1です。	3
アニメーションの方向	アニメーションの規定は、次のサイクルに逆に再生するかどうか。デフォルトでは、「正常」です。	3
アニメーションプレイ状態	かどうかのアニメーションの規定は、実行中または一時停止されています。デフォルトでは「実行中」されます。	3
アニメーションフィルモード	オブジェクトのアニメーション時間外の状態の規定。	3

.swiper-container.swiper2 .swiperマスク{ 
    表示：なし。
    背景色：RGBA（0、0、0、0.5）。
    位置：絶対; 
    幅：270px; 
    高さ：360px; 
    トップ：0; 
    左：0; 
    z屈折率：70。アニメーション：getintoContainer 1Sが無限代替を和らげます。
    / * Firefoxの：* / -moz-アニメーション：getintoContainer 1Sは無限の代替を和らげます。
    / *サファリ和クロム：* / -webkit-アニメーション：getintoContainer 1S無限代替を和らげます。
    / *オペラ：* / -o-アニメーション：getintoContainer 1Sは無限の代替を和らげます。
}

　　++ @keyframesカスタムアニメーション処理は、使用して、これは簡単に形成するために、これが25％にアニメーションアニメーションや他のプロセスを定義したものをかもしれから何もありません。

@keyframes getintoContainer { 
    0％{ 
        左：15ピクセル。
        トップ：15ピクセル; 
        幅：240ピクセル; 
        高さ：330px; 
        背景色：RGBA（0、0、0、0）; 
    } 

    100％{ 
        左：0PX。
        トップ：0PX。
        幅：270px; 
        高さ：360px; 
        背景色：RGBA（0、0、0、0.5）。
    } 
}

おすすめ