CSS3 multiple transitions reversed animation

问题

I have a div I'm trying to animate with CSS.

div {
  width:100px;
  height:50px;
  -moz-transition:
        width: 1s,
        height: 1s 1s;
}

div:hover {
  width:400px;
  height:400px;
}

It works as I want when I hover; the width is first animated, followed by the height after a 1 second delay. But when I hover off the div, I would like it to do the same animations, but in reversed order; height first, then width. Is there any way to achieve this using only CSS?

回答1:

You can just add -moz-transition to :hover too:

http://jsfiddle.net/nvn6p/1/

回答2:

This works for me. And makes it cross-browser compatible.

Basically, I just added the same transitions to the :hover, however ... and this is IMPORTANT ... you need to reverse the height and width on the initial transition

div {
  background:red;  
  width:100px;
  height:50px;
  -moz-transition-property: height, width;
  -webkit-transition-property: height, width;
  transition-property: height, width;
  -moz-transition-duration: 1s, 1s;
  -webkit-transition-duration: 1s, 1s;
  transition-property-duration: 1s, 1s;
  -moz-transition-delay: 0, 1s;
  -webkit-transition-delay: 0, 1s;
  transition-property-delay: 0, 1s;
}

div:hover {
  width:400px;
  height:400px;
  -moz-transition-property: width, height;
  -webkit-transition-property: width, height;
  transition-property: width, height;
  -moz-transition-duration: 1s, 1s;
  -webkit-transition-duration: 1s, 1s;
  transition-property-duration: 1s, 1s;
  -moz-transition-delay: 0, 1s;
  -webkit-transition-delay: 0, 1s;
  transition-property-delay: 0, 1s;    
}

Example: http://jsfiddle.net/qknMg/1/

来源：https://stackoverflow.com/questions/7902552/css3-multiple-transitions-reversed-animation

标签

css

transitions