背景颜色和字体颜色过渡

时间:2014-07-07 00:55:02

标签: css3

我知道如何通过css3中的转换来改变bg颜色和字体颜色:

/**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;

我的问题是,我可以在同一个班级设置两个过渡(bg和字体颜色)吗? 谢谢!

1 个答案:

答案 0 :(得分:15)

如果要合并它们,可以按如下方式使用短手过渡:

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