CSS不同属性的不同延迟

Question

所以我有一个带有图像的 div。单击时图像会放大到更大的尺寸；高度和宽度是过渡的。我想先扩大高度，然后扩大宽度。我想知道，有没有办法只用 CSS 来做到这一点？

到目前为止我的代码：

CSS：

.resize {
  background-image: url('http://www.purosoftware.com/escritorio-fondo-de-pantalla/imagenes/03-fondo-de-pantalla-playa-en-alta-definicion-hd-resolucion-1920x1200-01.jpeg');
  background-size: contain;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  transition: height 1000ms ease; // transition height right away
  transition: width 1000ms 500ms ease; // transition width with delay
  width: 200px;
  height: 200px;
}
.resize.larger {
  height: 800px;
  width: 800px;
}

HTML（带有 Angularjs 标记）

<!-- on click, apply 'larger' class, then remove larger class on second click -->
<div class='resize' ng-init="clicked = false"
     ng-class="{'larger': clicked}" ng-click="clicked =! clicked">

</div>

我遇到的第二个问题是我想切换高度和宽度的延迟，这意味着我想先转换宽度，然后转换高度。

Plunker：http://plnkr.co/edit/97V80ckSypkLJPLTT2UW?p=preview

Answer 1

您可以声明多个转换，但用逗号分隔 , 不要再次设置转换，因为它会覆盖前一个：

.resize {
      transition: width 1s ease,
                  height 1s .5s ease;
}

检查下面的sn-p。

.resize {
  background-image: url('http://www.purosoftware.com/escritorio-fondo-de-pantalla/imagenes/03-fondo-de-pantalla-playa-en-alta-definicion-hd-resolucion-1920x1200-01.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  transition: width 1s ease, height 1s .5s ease;
  width: 200px;
  height: 200px;
}
.resize:hover {
  height: 400px;
  width: 400px;

<div class="resize"></div>

Answer 2

你可以用逗号分隔它们

{
transition: 
height 1000ms ease,
width 1000ms 500ms ease; 
}

Answer 3

添加已经提供的答案，用于编写转换属性的proper syntax 是：

transition: [property] [duration] <timing function> <delay>;

只写：

transition: height 1s linear, width 1s ease 1s;

width 的转换将在 height 的转换完成后立即调用。