CSS3トランジション - 私は私のCSS3トランジションの問題を抱えています同じ要素

Question

に2つの異なるトランジションを追加：

div.one_fifth{ 
    border: 1px solid #48484A; 
    transition : border 400ms ease-out; 
    -webkit-transition : border 400ms ease-out; 
    -moz-transition : border 400ms ease-out; 
    -o-transition : border 400ms ease-out; 
    font-size: 18px; 
    transition : font 300ms ease-out; 
    -webkit-transition : font 300ms ease-out; 
    -moz-transition : font 300ms ease-out; 
    -o-transition : font 300ms ease-out; 
} 

div.one_fifth:hover{ 
    border: 1px solid #ed2124; 
    font-size: 20px; 
} 

今の問題は、私は遷移の両方を定義する場合、境界1が動作しないということです。..それで、2つのトランジションが干渉し、フォントが1つをオーバーライドするように見えます...もしそうなら、どうやって異なるスピード（ms）でそれを行いますか？

Answer 1

あなたは、単一の遷移プロパティを使用して、2以上のカンマで区切られたトランジションを指定することができます。

JSFiddle Demo

div.one_fifth { 
    border: 1px solid #48484A; 
    font-size: 18px; 
    -webkit-transition : border 400ms ease-out, font 300ms ease-out; 
     -moz-transition : border 400ms ease-out, font 300ms ease-out; 
     -o-transition : border 400ms ease-out, font 300ms ease-out; 
      transition : border 400ms ease-out, font 300ms ease-out; 
} 
div.one_fifth:hover { 
    border: 1px solid #ed2124; 
    font-size: 20px; 
} 

Answer 2

をあなたが同じタイミングを使用し、両方の遷移のために緩和された場合は、使用できtransition: all;

jsFiddle

div.one_fifth { 
    border: 1px solid #48484A; 
    font-size: 18px; 
    -webkit-transition: all 400ms ease-out; 
     -moz-transition: all 400ms ease-out; 
     -o-transition: all 400ms ease-out; 
      transition: all 400ms ease-out; 
} 
div.one_fifth:hover { 
    border: 1px solid #ed2124; 
    font-size: 20px; 
}