div要素をアニメーション化するために、サイト指定された位置をスライドさせて

<！DOCTYPE HTML > 
< HTML > 
< ヘッド> 
< スタイル>  
.anim-ショー
{ 
幅：100ピクセル; 
高さ：100pxに; 
背景：赤; 
位置：相対; 
アニメーション名：mymove ; 
アニメーション-DURATION ：5S ; / * 5Sアニメーション時間の実装は、0または全くアニメーション書いていないこと* / 

/ * アニメーション名の実行、-wekitアニメーション名が実行されていない場合、互換性のデバッグを* / 
-webkit-アニメーション名：mymove ; 
-webkit-アニメーションDURATION ：2S ; / * 5S、アニメーションの実行時間を表して、0又は全くアニメーションを記述* / 
} 

@keyframes mymove / * アニメーションによって実行されるアニメーション名に対応する* / 
{ 
から{トップ：200pxの; } / * 初期位置は、アニメーション実行* / 
へ{ トップ：0PXを; } / * アニメーション位置の端* / 
0％{ 
不透明：0.1 ;  / * 不透明度の初期状態10％* / 
} 
50％{ 
不透明度：0.5;  / * 中間透明状態の50％* / 
} 
100％{ 
不透明度：1 ;  / * 不透明な状態の終わり* / 
} 
} 

@ -webkit-キーフレームmymove / * アニメーションによって行われる-webkit-アニメーション名を、対応* / 
{ 
から{左：200pxの; } / * アニメーションの初期位置を実行* / 
へ{ 左：0PX ; } / * アニメーションの場所の終わり* / 
} 
</ スタイル> 
</ ヘッド> 
< ボディ> 
    <divのスタイル= "高さ：2000px;" > 

    </ divの> 

    < divのクラス= "アニメーション" > 
        11111 
    </ divの> 
    
    < divのスタイル= "高さ：2000px;" > 

    </ divの> 

    < divのクラス= "アニメーション" > 
        11111 
    </ divの> 


    
    < スクリプトSRC = "http://www.jq22.com/jquery/2.1.1/jquery.min.js" > </ スクリプト> 
    < スクリプト>
        

        = $（" .anim " ）; // 触发遍历所用的类

        のsetTimeout（関数（）{ 

            $（ウィンドウ）.scroll（関数（）{ 

                ロール（）; 

            }）

            $（ウィンドウ）.resize（関数（）{ 

                ロール（）; 

            }）

            ロール（） ; 

        }、6 ）

        関数ロール（）{ 

            VAR oHeight = $（ウィンドウ）.height（）; 

            VAR ScrVal = $（ウィンドウ）.scrollTop（）; 

            anim.each（機能（I）{ 

                場合（ScrVal + oHeight > anim.eq（I）.offset（）へ戻る。-  50 ）{ 

                    anim.eq（I）.addClass（" アニメーション・ショー" ）。

                } 

            }）

        } 
    </ スクリプト> 
</ ボディ> 
</ HTML >