CSS3 Transitions - dodanie 2 różnych przejścia do tego samego elementu

Question

Mam problemy z moim przejścia CSS3:

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; 
} 

Teraz problemem jest to, że kiedy definiować oba przejścia, jedna granica nie działa .. Więc wygląda na to, że dwa przejścia zakłócają i czcionka przesłoniła granicę ... Jak mogę je zintergrować, jeśli tak, w jaki sposób zrobiłbyś to z różnymi prędkościami (ms)?

Answer 1

można określić 2 lub więcej przejść oddzielonych przecinkami, stosując jedną właściwość przejścia:

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

Jeśli zostały przy użyciu tego samego taktowania i łagodne dla obu przejściach, można użyć 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; 
}