背景色和字体颜色的过渡效果

Question

我知道如何使用CSS3中的过渡来更改背景颜色和字体颜色：

/**Background color transition**/
-webkit-transition: background-color 300ms linear;
-moz-transition: background-color 300ms linear;
-o-transition: background-color 300ms linear;
-ms-transition: background-color 300ms linear;
transition: background-color 300ms linear;

/**Font color transition**/
-webkit-transition-property:color, text;
-webkit-transition-duration: 1s, 1s;
-webkit-transition-timing-function: linear, ease-in;

-moz-transition-property:color, text;
-moz-transition-duration:1s;
-moz-transition-timing-function: linear, ease-in;

-o-transition-property:color, text;
-o-transition-duration:1s;
-o-transition-timing-function: linear, ease-in;

我的问题是，我可以在同一个类中设置两个过渡效果（背景和字体颜色）吗？ 谢谢！

- Stefan Luv

Answer 1

如果您想将它们组合在一起，可以使用以下简写转换：

CSS

-webkit-transition: background-color 300ms linear, color 1s linear;
-moz-transition: background-color 300ms linear, color 1s linear;
-o-transition: background-color 300ms linear, color 1s linear;
-ms-transition: background-color 300ms linear, color 1s linear;
transition: background-color 300ms linear, color 1s linear;

- josh.gaby

---

你可以不使用速记方式将它们组合起来，例如：transition-property: background-color, color、transition-duration: 300ms, 300ms 等。 - silvenon