转换结束时应用CSS属性

Question

在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;
}

我想在转换完成300ms后应用:hover声明中的padding和margin属性.

Answer 1

你可以添加这样的延迟:

transition: box-shadow 300ms;

transition: padding 300ms 400ms;

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

DEMO

关于CSS-Tricks的文章

Answer 2

您可以通过在内部或外部放置另一个元素.something并对新元素应用填充和边距过渡来实现此目的，但将transition-delay值设置为等于或大于初始过渡时间的时间box-shadow。

因此，例如：

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

和CSS：

.immediate {
  background: #eeb;
  transition: box-shadow 300ms;
}

.immediate:hover {
  box-shadow: 0 0 3px black;
}

.later {
   margin: 0;
   padding: 10px 0;
   transition: all 400ms;
   transition-delay: 300ms;
}

.later:hover {
   margin: 10px 0;
   padding: 0;
}

这将box-shadow在 300 毫秒内执行转换，然后在 400 毫秒内执行转换margin（padding如果这是您正在寻找的效果，您可以将此转换时间设置为 0）。

您可以在 jsFiddle 上尝试：http ://jsfiddle.net/gTVVk/2/

编辑： 邓肯·贝蒂的答案就很好，除非您需要对同一属性执行不同的转换。否则，没有必要使用嵌套 div 让事情变得过于复杂。