CSS转换延迟不起作用答案

【问题标题】：CSS transition-delay not workingCSS转换延迟不起作用
【发布时间】：2014-07-10 10:37:24
【问题描述】：

我正在尝试使图像在悬停在其上时变大。但是 transition-delay 属性似乎不起作用。图片由object 标签加载，但我也尝试使用img 标签。

<div id="c_a">
<object data="https://lh6.ggpht.com/Rr2X9m8HrCIGJrOKG3MOr9pRYERaa4yBLWUTeB6YNgJVlseJSMIbFWDc9nX6O2Y9HeWRf-2qL1gy0TInmKtKfRIBAJVPK4eglImapFb9=s660" type="image/jpg"></object>
</div>

CSS：

#c_a object{
  transition: width 1s linear 2s, height 1s linear 2s;
  -webkit-transition: width 1s linear 2s, height 1s linear 2s;
  -o-transition: width 1s linear 2s, height 1s linear 2s;
  -moz-transition: width 1s linear 2s, height 1s linear 2s;
}
#c_a object:hover{
  width: 300%;
  height: 300%;
}

【问题讨论】：

也发布代码。 :) 顺便说一句不错的第一篇文章！ ;)
你有什么works fine

标签： html css css-transitions

【解决方案1】：

我遇到了转换延迟不起作用的问题将transition-delay 放在 transition 属性之后很重要！

transition:
transition-delay:

【讨论】：

与这个问题无关。
与一半通过谷歌登陆这个问题的人有关。
正是我需要的，谢谢。很容易被忽视。
这才是真正的解决方案！选择的答案没有意义。
这出于某种原因打破了延迟

【解决方案2】：

首先给出 100% 的初始宽度和高度。

#c_a object{
   width:100%;
   height:100%;
   // transitions..
}

Working Fiddle

【讨论】：

谢谢。但是你愿意解释为什么不指定宽度和高度就不能工作吗？
@LcSalazar 你等到延迟了吗？ ;) 在 Chrome 和 Firefox 中测试
@user3661754 浏览器对与auto 之间的动画产生奇怪的关系； CSS WG 担心所有往返于auto 的嵌套转换的复杂性，其中转换会导致循环重新计算。
在我的情况下不起作用，大多数规则等待 250 毫秒，但不是全部

【解决方案3】：

我的transition-delay 也不起作用，但 corbacho 的解决方案对我没有用。但是，我发现如果我将transition 更改为transition-duration 就可以了！

transition-duration:
transition-delay:

顺便说一句，这个顺序对我来说并没有什么不同。

【讨论】：

这里是 imo 的最佳答案 - 无需担心规则顺序或奇怪的黑客攻击