CSS：左、右の位置の移動

Question

私は右側からスライドしているバーガーメニューを持っています。そして、私は<div>をスライドさせて重なりを防止したいと思っています（どちらも不透明度があります）< 1 、それは奇妙に見える）。

とにかく、私は次のコードを使用しているときleft + right値を変更するjQueryのを使用しています、遷移がしかし、私はまた、移動しているのdivのためのフェードアニメーションを使用しています偉大な

transition: all .3s ease-in-out; 
-webkit-transition: all .3s ease-in-out; 

の作品何らかの理由でそれが引き起こされています。基本的には点滅し、画面に入るとゆっくりとフェードインします。予想通り右側が動作しているが、左側は単に右側がまだアニメーションされながら、その新しい場所にジャンプ：

transition: left .3s ease-in-out; 
-webkit-transition: left .3s ease-in-out; 
transition: right .3s ease-in-out; 
-webkit-transition: right .3s ease-in-out; 

結果：だから、私は次のような何かをしたいです。どんなアイデアが間違っているの？ここでは全体のCSSクラスが

aboutScreen{ 
    position: absolute; 
    text-align: center; 
    height: 100%; 
    top: 0; 
    left: 150px; 
    right: 150px; 
    background-color: rgba(0, 0, 0,0.7); 

    transition: left .3s ease-in-out; 
    -webkit-transition: left .3s ease-in-out; 
    transition: right .3s ease-in-out; 
    -webkit-transition: right .3s ease-in-out; 
} 

です注：同じプロパティがあるときに、CSSで

transition: left .3s ease-in-out; 
-webkit-transition: left .3s ease-in-out; 
transition: right .3s ease-in-out; 
-webkit-transition: right .3s ease-in-out; 

：あなたはjQueryのをしたい場合、私はあなたの元のコードは、このラインを持っている

Answer 1

をお知らせ複数回定義されている場合、古い値は上書きされます。

これは、rightのトランジション効果のみを取得しますが、leftを含まない理由です。

幸いなことに、CSSでは複数の値を1つのプロパティ定義にネストすることができます。

.aboutScreen { 
    position: absolute; 
    text-align: center; 
    height: 100%; 
    top: 0; 
    left: 150px; 
    right: 150px; 
    background-color: rgba(0, 0, 0,0.7); 

    /* Original 
    transition: left .3s ease-in-out; 
    -webkit-transition: left .3s ease-in-out; 
    transition: right .3s ease-in-out; 
    -webkit-transition: right .3s ease-in-out; 
    */ 

    /* Corrected */ 
    -webkit-transtition: left .3s ease-in-out, right .3s ease-in-out; 
    transition: left .3s ease-in-out, right .3s ease-in-out; 
} 

PS：

あなたのコードを読みやすくしたい場合、あなたはまた、次の操作を行うことができます：それはある

：2

transition-property: left, right; 
transition-duration: 0.3s; 
transition-timing-function: ease-in-out; 
transition-delay: 0s; 

PSプレフィックスのないプロパティを最後に配置するのが一般的に好ましいのは、それが「真の」プロパティであるからです（言い換えれば、 "標準化された"）。

など-webkit-、-moz-、-ms-と-o-などのブラウザプレフィックスの目的は正式にプロパティをサポートし、その時点で、ないブラウザのバージョンに対応するためです。

したがって、接頭辞付きのプロパティが接頭辞以外の接頭辞の後に設定されていると、ブラウザは接頭辞付きの定義を使用し、時には非標準化された動作をレンダリングします。