背景颜色和字体颜色过渡

Ste*_*Luv 3 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;
Run Code Online (Sandbox Code Playgroud)

我的问题是,我可以在同一个类中设置两个转换(bg和字体颜色)?谢谢!.

小智 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;
Run Code Online (Sandbox Code Playgroud)

  • 您也可以在不使用速记的情况下组合它们.`transition-property:background-color,color`,`transition-duration:300ms,300ms`等. (2认同)