CODEWITHSUNDEEP
htmlcss
Pipeline
Pipeline

Reputation: 1059

Multiple webkit transitions in one line

  -webkit-transition: width 0.4s, height 0.4s;
     -moz-transition: width 0.4s, height 0.4s;
       -o-transition: width 0.4s, height 0.4s;
          transition: width 0.4s, height 0.4s;

This effects the size of a div element when it is animated/moved, but I also have a requirement to adjust the opacity of it as well: 

  -webkit-transition: opacity 0.4s ease-out;
   -moz-transition: opacity 0.4s ease-in;
    -o-transition: opacity 0.4s ease-in;
     transition: opacity 0.4s ease-in;

Do these go one after another in my style sheet or is there a way for me to combine them into one? Is there a best practice?

Upvotes: 0

Views: 96

Answers (1)

Danield
Danield

Reputation: 125641

Just use a comma to separate the properties in order to combine them (like you yourself did in the first example)

-webkit-transition: width 0.4s, height 0.4s,opacity 0.4s ease-in;
transition: width 0.4s, height 0.4s,opacity 0.4s ease-in;

Codepen Demo

Just for completeness: the following is the formal syntax of the transition property from the spec:

Value: none | <single-transition-property> [ ‘,’ <single-transition-property> ]*

Which shows that multiple properties may be transitioned when separated by a comma.

Upvotes: 2

Related Questions