Start Animating CSS Value at Specific Keyframe

Question

I have a block that I want to animate the height to 0, and then the width to 0. Is there a way to do that with a CSS animation?

The catch is that I don't know what the starting height/width of the block is, so using

@keyframes shrink {
    50% { height: 0; width: <UNKNOWN>; }
    100% { width: 0 }
}

doesn't work.

The effect I'm going for is like this (using jQuery): http://jsfiddle.net/andrewburgess/LFjEv/

score 1 · Accepted Answer · 2014-02-27 17:12:12Z

1

UPDATED TO THE ANSWER THAT WAS ACTUALLY ACCEPTED

you can animate with a delay. You just need to set the class via JS. Sadly this cannot be done with keyframe animations if the width is dynamic

http://jsfiddle.net/LFjEv/4/

CSS

.block, .other-block {
    background-color: red;
    display: inline-block;
    height: 200px;
    vertical-align: middle;
    width: 200px;
}
.block {
    -webkit-transition-property: height, width;
    -webkit-transition-delay: 0ms, 500ms;
    -webkit-transition-duration:500ms;
    -moz-transition-property: height, width;
    -moz-transition-delay: 0ms, 500ms;
    -moz-transition-duration:500ms;
    transition-property: height, width;
    transition-delay: 0ms, 500ms;
    transition-duration:500ms;
}
.block.shrink {
    height: 0;
    width: 0;
}
.other-block {
    background-color: yellow;
}

JS

setTimeout(function () {
    $('.block').addClass('shrink');
}, 0);

edited Feb 27, 2014 at 17:12

answered Feb 12, 2014 at 22:41

user950658

Sign up to request clarification or add additional context in comments.

5 Comments

Andrew Burgess Over a year ago

The issue is that the width animates for the entire duration, instead of the second half of it.

Andrew Burgess Over a year ago

I'm basically looking for: 0%-50% animate height, 50%-100% animate width, except that I don't necessarily know what the width is to fix it for the 0%-50% portion of the animation.

user950658 Over a year ago

ah.. sorry. my mistake. You would have to trigger a class or the dimension via javascript. The you can use CSS transitions with a delay. Sadly I could not find a different solution (yet). but you can still use CSS transitions instead of jQuery.animate jsfiddle.net/LFjEv/4

user950658 Over a year ago

If you have a child with the width it works without javascript. jsfiddle.net/LFjEv/6

Andrew Burgess Over a year ago

The transition method looks like it is ideal. Thanks for the different versions as well

Collectives™ on Stack Overflow

Start Animating CSS Value at Specific Keyframe

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related