CSS3 过渡 - 为同一个元素添加 2 个不同的过渡答案

【问题标题】：CSS3 Transitions - Adding 2 different transitions to the same elementCSS3 过渡 - 为同一个元素添加 2 个不同的过渡
【发布时间】：2013-05-08 21:11:28
【问题描述】：

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

现在的问题是，当我定义两个过渡时，边框之一不起作用......所以看起来两个过渡相互干扰，字体一个覆盖了边框......我该如何整合它们，如果那么，你将如何以不同的速度（毫秒）来做到这一点？

【问题讨论】：

旁注：始终在最后指定无前缀样式（在-webkit-、-moz、-ms、-o- 变体之后），以便无前缀样式（标准化的 W3C 版本style) 将在尽可能多的浏览器上使用。
是的，请注意，嘿...谢谢。实际上我一直都这样做，但这只是我从 sn-p 获得的代码，我从不让步重新安排......

标签： css css-transitions

【解决方案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;
}

【讨论】：

【解决方案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;
}

【讨论】：