トランジションに複数のCSSクラスを使用する

Question

トランジションに複数のCSSクラスを使用できますか？

私はこのCSSがある場合：

.fade { 
    opacity: 0; 
    transition: opacity .5s linear; 
} 
.left { 
    left: 10px; 
    transition: left .3s ease; 
} 

は、その後、私は1つのhtml要素に2クラスを使用することはできませんが、一つの遷移特性が他を上書きします。 私は（this questionを参照）の両方を行うクラス.fade-leftを作成できますが、このモジュール性を保ちたいと思います。

両方のトランジションを追加する方法はありますか？

Answer 1

あなたが複数のトランジションを使用するためのこの方法を使用する必要があります。

transition: opacity .5s linear, left .3s ease; 

拡張方法：

-webkit-transition: opacity .5s linear, left .3s ease; 
    -moz-transition: opacity .5s linear, left .3s ease; 
    -ms-transition: opacity .5s linear, left .3s ease; 
     transition: opacity .5s linear, left .3s ease; 

を他のクラスがleftプロパティを変更しないので、あなたがする必要はありません心配。簡単な方法で、allを使用することができます。