过渡结束时应用CSS属性 [英] Apply CSS properties when transition ends

问题描述

在CSS3转换结束后，我如何将声明的属性应用于元素 ?我有类似的东西:

How do I have the properties of a declaration apply to an element after the CSS3 transitions end? I have something like:

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

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

I'd like the padding and margin properties in the :hover declaration to be applied after the transition is done in 300ms.

推荐答案

您可以添加以下延迟:

transition: box-shadow 300ms;

transition: padding 300ms 400ms;

第一个将在悬停时开始并持续300ms，第二个将在400ms之后开始并再次持续300ms.

the first will start on hover and last 300ms, the second will start after 400ms and again last 300ms.

演示

有关CSS技巧的文章

这篇关于过渡结束时应用CSS属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！