Apply CSS properties when transition ends

Question

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

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

Answer 1

you can add a delay like this:

transition: box-shadow 300ms;

transition: padding 300ms 400ms;

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

DEMO

Article on CSS-Tricks