CSS3 多重转场反转动画答案

【问题标题】：CSS3 multiple transitions reversed animationCSS3 多重转场反转动画
【发布时间】：2011-10-26 12:28:36
【问题描述】：

我有一个 div，我正在尝试使用 CSS 制作动画。

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

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

当我悬停时它可以按我的意愿工作；首先是宽度动画，然后是延迟 1 秒后的高度。但是当我将鼠标悬停在 div 上时，我希望它执行相同的动画，但顺序相反；先高，后宽。有没有办法只使用 CSS 来实现这一点？

【问题讨论】：

标签： css transitions

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

基本上，我只是在:hover 中添加了相同的转换，但是...这是重要 ...您需要将height 和width 颠倒过来transition

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/

【讨论】：