CSS3多重过渡反向动画

Question

我有一个div，我想用CSS动画来实现。

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

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

在鼠标悬停时，它的工作方式与我想要的一样；首先是宽度动画，然后是1秒延迟后的高度。但是当我将鼠标从div中移开时，我希望它执行相同的动画，但是顺序相反；首先是高度，然后是宽度。是否有办法仅使用CSS实现这一点？

- Ohnegott

Answer 1

您可以在:hover后面添加-moz-transition:属性名称;即可实现效果：

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

- Alexey Ivanov

Answer 2

这对我很有效，而且使其跨浏览器兼容。

基本上，我只是在 :hover 中添加了相同的过渡效果，然而...这是重要的...你需要在初始的transition中反转height和width

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

示例：http://jsfiddle.net/qknMg/1/

- Jason Gennaro