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-transition 添加到 :hover ：

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