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

您可以使用单个过渡属性指定 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;
}