CODEWITHSUNDEEP
css
Stefan Luv
Stefan Luv

Reputation: 1209

background color and font color transition

I know how i can change bg-color and font color with transition in 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;

My question is, i can set two transitions (bg and font color) in same class? Thanks!.

Upvotes: 7

Views: 28054

Answers (1)

josh.gaby
josh.gaby

Reputation: 211

You can use short hand transitions as follows if you want to combine them:

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;

Upvotes: 18

Related Questions