[css] CSS transition shorthand with multiple properties?

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.

This question is related to css webkit css-transitions shorthand

The answer is


I think that this should work:

.element {
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
   transition: all .3s;
}

I made it work with this:

.element {
   transition: height 3s ease-out, width 5s ease-in;
}

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;

  &: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


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.


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_
<p>Hover box for demo</p>_x000D_
<div class="box"></div>
_x000D_
_x000D_
_x000D_

Demo


Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to webkit

com.apple.WebKit.WebContent drops 113 error: Could not find specified service HTML5 Video autoplay on iPhone What does the shrink-to-fit viewport meta attribute do? Chrome / Safari not filling 100% height of flex parent How to style HTML5 range input to have different color before and after slider? What are -moz- and -webkit-? Video auto play is not working in Safari and Chrome desktop browser Rotate and translate Background color not showing in print preview Blurry text after using CSS transform: scale(); in Chrome

Examples related to css-transitions

How to window.scrollTo() with a smooth effect CSS how to make an element fade in and then fade out? CSS transition with visibility not working Can I animate absolute positioned element with CSS transition? Spin or rotate an image on hover CSS3 transition doesn't work with display property CSS3 transition on click using pure CSS CSS Transition doesn't work with top, bottom, left, right Pure CSS scroll animation CSS 3 slide-in from left transition

Examples related to shorthand

PHP shorthand for isset()? Omitting the second expression when using the if-else shorthand Shorthand if/else statement Javascript CSS transition shorthand with multiple properties? $(document).ready shorthand What exactly does += do in python? Multiline string literal in C#