CSS3过渡——为同一个元素添加2个不同的过渡

Question

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

现在的问题是，当我定义两个过渡，边界的一个不工作…所以看起来这两个过渡是相互干扰的，字体覆盖了边框…我如何集成它们，如果是这样，你会如何用不同的速度(毫秒)来做?

Answer 1

您可以使用单个transition属性指定2个或多个逗号分隔的transition:

JSFiddle演示

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