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.

Have a look at this [**link**](http://stackoverflow.com/q/2087510/1577396). — Mr_Green, May 24 '13 at 08:45

score 24 · Answer 1 · answered May 24 '13 at 08:52

24

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

answered May 24 '13 at 08:52

Duncan Beattie

2,226
16
17

2

Will adding a second transition property cancel the first one? – Trever Thompson Mar 21 '20 at 10:40
@TreverThompson yes it will. This is not the way to define multiple transitions. You can see the fiddle is applying the box-shadow without a transition. See https://stackoverflow.com/a/7048326/4730332 – George Dimitriadis Aug 26 '21 at 11:09
So the answer here should be `transition: box-shadow 300ms, padding 300ms 400ms;`... why is this so highly upvoted if it doesn't work as written and demonstrated? – danronmoon Jan 17 '22 at 16:25

score 5 · Answer 2 · edited May 23 '17 at 12:10

You can achieve this by placing another element inside or outside .something and applying padding and margin transitions to the new element, but with transition-delay value set to the time equal or greater than time of your initial box-shadow transition.

So, for instance:

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

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

This will perform the box-shadow transition in 300ms, and afterwards margin and padding in 400ms (you can set this transition time to 0 if that's the effect you're looking for).

You can try it on jsFiddle: http://jsfiddle.net/gTVVk/2/

EDIT: Duncan Beattie's answer will do just fine, unless you need to perform different transitions on the same property. Otherwise there's no point to overcomplicate things with nested divs.

Nope, it's not necessary - it was my fault. `transition: all 400ms` overrides the `transition-delay` option if it is specified after `transition-delay`. I will update the answer, thanks. — konradstrack, May 26 '13 at 12:29

score 1 · Answer 3 · answered Nov 10 '20 at 12:33

When using @Duncan Beattie´s solution one property will override the other. This should work:

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

Syntax:

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

Apply CSS properties when transition ends

3 Answers3

Linked