Html CSS为不同的属性提供不同的延迟

所以我有一个有图像的div。单击后，图像会扩展到更大的尺寸；高度和宽度将被转换。我想先扩大高度，然后扩大宽度。我想知道，有没有一种方法可以只用CSS来实现这一点

到目前为止，我的代码是：

CSS:

HTML（带有Angularjs标记）

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

---

Plunker:

您可以用逗号分隔它们

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

---

您可以声明多个转换，但可以用逗号分隔，不重新设置转换，因为它会覆盖上一个转换：

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

检查下面的代码片段

。调整大小{
背景图像：url（'http://www.purosoftware.com/escritorio-fondo-de-pantalla/imagenes/03-fondo-de-pantalla-playa-en-alta-definicion-hd-resolucion-1920x1200-01.jpeg');
背景尺寸：封面；
背景重复：无重复；
边框：1px实心#ccc；
过渡：宽1s缓，高1s.5s缓；
宽度：200px；
高度：200px；
}
.调整大小：悬停{
高度：400px；
宽度：400px；

---

在已经提供的答案的基础上，编写转换属性的方法是：

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

---

宽度的转换将在
高度的转换完成后立即调用。
谢谢，关于如何在高度和宽度之间切换延迟的建议？（意思是：对于打开（第一次单击）我想延迟高度，但是对于关闭（第二次单击）我想改为延迟宽度。@SoluableNonagon我还不知道angular，但我想在更改类时使用jquery，也许我会在你的plunker上试用。@SoluableNonagon只在类大上检查这一点添加转换属性更改顺序或值你的建议不起作用：修复了错误，但请遵循。谢谢，有没有关于如何在高度和宽度之间切换延迟的建议？（意思是：对于打开（第一次单击）我想延迟高度，但是对于关闭（第二次单击）我想改为延迟宽度。
transition
是一种缩写。只需将其划分为每个属性，并用逗号分隔每个“子属性”。我不是CSS方面的专家，你能提供一个例子吗？
.resize {
      transition: width 1s ease,
                  height 1s .5s ease;
}

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

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