CODEWITHSUNDEEP
csscss-animations
Andrew Burgess
Andrew Burgess

Reputation: 5298

Start Animating CSS Value at Specific Keyframe

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/

Upvotes: 1

Views: 163

Answers (1)

user950658
user950658

Reputation:

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

Upvotes: 1

Related Questions