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/

Answer 2

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

基本上，我只是向:hover添加了相同的转换，但是......这是重要 ...您需要撤消height和{{ 1}}在最初的width

上

transition

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