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 · 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_

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

<p>Hover box for demo</p>_x000D_
<div class="box"></div>

_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

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

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

User · 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

[css] CSS transition shorthand with multiple properties?

Examples related to css

Examples related to webkit

Examples related to css-transitions

Examples related to shorthand