转换结束时应用CSS属性

在CSS3转换结束后，如何将声明的属性应用于元素？我有点像：

.something {
  background: blue;
  padding: 10px 0px;
  background-clip: content-box;
  transition: box-shadow 300ms;
}
.something:hover {
  box-shadow: 0px 0px 3px blue;
  padding: 0px;
  margin: 10px 0px;
}

---

我希望：hover声明中的padding和margin属性在300毫秒内完成转换后应用。

您可以通过在

内部或外部放置另一个元素来实现。something

并将padding和margin转换应用于新元素，但是

转换延迟

值设置为等于或大于初始

框阴影

转换时间的时间

例如：

<div class="immediate">
    <div class="later">
        I can haz transitions.
    </div>
</div>

这将在300ms内执行

box shadow

转换，然后在400ms内执行

margin

和

padding

（如果您正在寻找效果，可以将此转换时间设置为0）

您可以在JSFIDLE上尝试：

---

编辑：可以，除非您需要在同一属性上执行不同的转换。否则，就没有必要使用嵌套的div使事情过于复杂。

您可以添加如下延迟：

transition: box-shadow 300ms;

transition: padding 300ms 400ms;

第一个将在悬停时开始，持续300毫秒，第二个将在400毫秒后开始，再次持续300毫秒

---

使用@Duncan Beattie的解决方案时，一个属性将覆盖另一个属性。 这应该起作用：

transition: box-shadow 300ms linear, padding 300ms linear 400ms;

语法：

transition: [property] [duration] [timing-function] [delay], ... more property-transitions

---

看看这个。是

！重要信息

有必要吗？不，没有必要-是我的错<代码>转换：如果在

转换延迟

之后指定了

转换延迟

选项，则所有400ms将覆盖该选项。我将更新答案，谢谢。添加第二个转换属性会取消第一个吗？

transition: [property] [duration] [timing-function] [delay], ... more property-transitions