CSS3多重转换反转动画

我有一个div，我正试图用CSS制作动画

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

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

---

当我悬停的时候，它可以按照我的意愿工作；首先设置宽度的动画，然后是延迟1秒后的高度。但是当我离开div时，我想让它做同样的动画，但顺序相反；先是高度，然后是宽度。有没有办法只用CSS来实现这一点？

您只需将-moz转换添加到：hover-too:

---

这对我很有用。并使其跨浏览器兼容

基本上，我只是在

：hover

中添加了相同的转换，但是。。。这是非常重要的。。。您需要在初始

过渡

上反转

高度

和

宽度

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;    
}

示例：