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 来实现这一点？

Answer 1

您也可以将 -moz-transition 添加到 :hover 中：

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