CSS transition shorthand with multiple properties

Question

I can t seem to find the correct syntax for the CSS transition shorthand with multiple properties  This doesn t do anything    element     -webkit-transition  height  5s  opacity  5s  5s       -moz-transition  height  5s  opacity  5s  5s        -ms-transition  height  5s  opacity  5s  5s            transition  height  5s  opacity  5s  5s    height  0    opacity  0    overflow  0     element show     height  200px    opacity  1      I add the show class with javascript  The element becomes higher and visible  it just doesn t transition  Testing in latest Chrome  FF and Safari   What am I doing wrong   EDIT  Just to be clear  I m looking for the shorthand version to scale my CSS down  It s bloated enough with all the vendor prefixes  Also expanded the example code

User · Accepted Answer

Syntax   transition   lt property gt      lt duration gt      lt timing-function gt      lt delay gt             Note that the duration must come before the delay  if the latter is specified   Individual transitions combined in shorthand declarations   -webkit-transition  height 0 3s ease-out  opacity 0 3s ease 0 5s  -moz-transition  height 0 3s ease-out  opacity 0 3s ease 0 5s  -o-transition  height 0 3s ease-out  opacity 0 3s ease 0 5s  transition  height 0 3s ease-out  opacity 0 3s ease 0 5s    Or just transition them all   -webkit-transition  all 0 3s ease-out  -moz-transition  all 0 3s ease-out  -o-transition  all 0 3s ease-out  transition  all 0 3s ease-out    Here is a straightforward example  Here is another one with the delay property     Edit  previously listed here were the compatibilities and known issues regarding transition  Removed for readability   Bottom-line  just use it  The nature of this property is non-breaking for all applications and compatibility is now well above 94  globally   If you still want to be sure  refer to http   caniuse com css-transitions

User · Answer

This helped me understand   streamline  only what I needed to animate      SCSS - Multiple Animation  Properties   durations   etc     on hover  animate div  width opacity  - from   0px  0  to   100vw  1    base     max-width  0vw    opacity  0     transition-property  max-width  opacity     relative order   transition-duration  2s  4s     effects relatively ordered animation properties   transition-delay  6s     effects delay of all animation properties   animation-timing-function  ease      amp  hover       max-width  100vw      opacity  1       transition-duration  5s     effects duration of all aniomation properties     transition-delay  2s  7s     effects relatively ordered animation properties           This applies for all transition properties  duration  transition-timing-function  etc   within the   base  class

User · Answer

If you have several specific properties that you want to transition in the same way  because you also have some properties you specifically don t want to transition  say opacity   another option is to do something like this  prefixes omitted for brevity     myclass       transition  all 200ms ease      transition-property  box-shadow  height  width  background  font-size      The second declaration overrides the all in the shorthand declaration above it and makes for  occasionally  more concise code    x000D   x000D     prefixes omitted for brevity    x000D   box   x000D      height  100px  x000D      width  100px  x000D      background  red  x000D      box-shadow  red 0 0 5px 1px  x000D      transition  all 500ms ease  x000D        note  not transitioning width    x000D      transition-property  height  background  box-shadow  x000D    x000D   x000D   box hover   x000D    height  50px  x000D    width  50px  x000D    box-shadow  blue 0 0 10px 3px  x000D    background  blue  x000D    x000D   lt p gt Hover box for demo lt  p gt  x000D   lt div class  box  gt  lt  div gt  x000D   x000D   x000D    Demo

User · Answer

By having the  5s delay on transitioning the opacity property  the element will be completely transparent  and thus invisible  the whole time its height is transitioning  So the only thing you will actually see is the opacity changing  So you will get the same effect as leaving the height property out of the transition     transition  opacity  5s  5s    Is that what you re wanting  If not  and you re wanting to see the height transition  you can t have an opacity of zero during the whole time that it s transitioning

User · Answer

I made it work with this   element      transition  height 3s ease-out  width 5s ease-in

User · Answer

I think that this should work   element      -webkit-transition  all  3s     -moz-transition  all  3s     -o-transition  all  3s     transition  all  3s

[css] CSS transition shorthand with multiple properties?

Examples related to css

Examples related to webkit

Examples related to css-transitions

Examples related to shorthand