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