CSS3 Geçişler - Ben CSS3 geçişleri ile ilgili sorunlar yaşıyorum aynı elemana

Question

-2 farklı geçişler ekleme:

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

Şimdi problem ben geçişleri hem tanımladığınızda, sınır biri çalışmıyor olmasıdır .. İki geçişin birbirine karıştığı ve yazı tipinin bir kenarını geçersiz kıldığına benziyor ... Onları nasıl birbirimize ayıracağım, eğer öyleyse, bunu farklı hızlarla (ms) nasıl yaparsınız?

Tek bir geçiş özelliğini kullanarak, 2 veya daha fazla virgülle ayrılmış geçişler belirtebilirsiniz

Answer 1

: Aynı zamanlama ile ve her iki geçişleri için hafifletilmesi olsaydı

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

, sen transition: all; kullanabilirsiniz

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