CSSトランジションアニメーションによって作成された不要な空白

Question

私はスクロールトリガCSSアニメーションを作成していましたが、右からのオフスクリーントランジションに問題があります。アニメーションは、私が望むように正確に動作しますが、ページの側面に不要な空白を作成しています。この空白のサイズは、私が設定したトランジションに対応しているように見えますが、ページ上のすべてのアニメーションがトリガーされるまでは消えません。要素がキャンバスから移動するようにこの空白を削除する方法に関するアイデア？ここで

は、あなたがこの問題を解決するために何ができる一つのことは、overfrlow-Xを追加するために、私のテスト環境へのリンクCSSアニメーションに関連していない http://lamp.cse.fau.edu/~zellis1/test/

/*Slide in right*/ 
.slidein-right{ 
    opacity: 0; 
    -moz-transition: all 750ms ease-out; 
    -webkit-transition: all 750ms ease-out; 
    -o-transition: all 750ms ease-out; 
    transition: all 750ms ease-out; 

    -moz-transform: translate3d(100px, 0px, 0px); 
    -webkit-transform: translate3d(100px, 0px, 0px); 
    -o-transform: translate(100px, 0px); 
    -ms-transform: translate(100px, 0px); 
    transform: translate3d(100px, 0px, 0px); 

    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 

.slidein-right.in-view{ 
    opacity: 1; 
    -moz-transform: translate3d(0px, 0px, 0px); 
    -webkit-transform: translate3d(0px, 0px, 0px); 
    -o-transform: translate(0px, 0px); 
    -ms-transform: translate(0px, 0px); 
    transform: translate3d(0px, 0px, 0px); 

} 

Answer 1

です：隠されました;あなたの体に。

body{ 
    overflow-x: hidden; 
} 

Answer 2

あなたは、変換のための要素とCSSの仕様をアニメーション化する変換（Animate.cssは、要素を移動する方法）を使用しているように要素が全てまで、ブラウザのオーバーフロー、ひいては身体オーバーフローに影響を与える必要があることを指定します変換アニメーションは終了しました。

あなたは、含まれている要素の上にoverflow:hidden（x方向のみに変換すると、より良いoverflow-x:hidden）を追加できます。

は、このCSS

animation-fix{ 
    overflow-x:hidden; 
} 

を追加し、ボディにクラスanimation-fixを追加し、すべてのアニメーションが完了した上で、それを削除します。

.animation-element.in-viewのdivの数を確認することで、これを行うことができます。クラスは、あなたがhtmlで持っている.animation-elementクラスのdivの数に等しくなります。

Answer 3

あなたが木工を出てくる不正な空白を取得するときに、ここでこの男は常にあなたの友達です：

overflow: hidden; 

overflow-x: hidden; 
overflow:y: hidden; 

異常が右に直接であれば、おそらくオーバーフロー-xは、あなたが望む男になります。私はまた、他のウェブブラウザでそれをチェックして、それが完全に解決されたことを確認することをお勧めします。

Chrome、Firefox、Safari、およびIEまたはEdgeを確認してください。ちょうど良い丸みを帯びたサンプルを取得する。スマートフォンでも確認してください。申し訳ありませんが、私のバックグラウンドはQAです。一貫性が重要なため、ボーナスロジックをインストールしようとしています。

これの一部として、F12と言って、ページ上のCSSを直接​​編集することをお勧めします。これは、予想外のレイヤーで発生している可能性があるためです。