CODEWITHSUNDEEP
cssanimationheight
Nick
Nick

Reputation: 231

height animation is not working in CSS sample

Does anybody know why the height animation is not working on this example and causes this "jump" on the animation?

transition: height .5s;

http://jsfiddle.net/0a72pr9g/16/

Thanks, Nick

Upvotes: 0

Views: 87

Answers (2)

Carol McKay
Carol McKay

Reputation: 2424

One transition was cancelling out the other, and the other, you need to do it like this:

.box {
   transition: height .5s, margin .5s, transform .5s;
}

NOT like this:

.box {
   transition: height .5s;
   transition: margin .5s;
   transition: transform .5s;
}

linky: https://jsfiddle.net/0a72pr9g/26/

Upvotes: 1

Nick
Nick

Reputation: 231

I found a solution! I switched from this

transition: height .5s;
transition: margin .5s;
transition: transform .5s;

to this (I've added a few more animations but it's unrelated)

transition: height .25s, margin .25s, transform .25s, background .25s, color .25s;

and that fixed the issue! If anybody knows why, I would love to know.

Here's the updated example.

http://jsfiddle.net/0a72pr9g/23/

Thanks

Upvotes: 1

Related Questions