CSS3 transitions when div content changes and div grows

Vote count:

0

I have a div that get's filled with text. That text changes when different buttons get clicked and the div grows and shrinks to accommodate the text (as divs normally do when you use CSS). It has a background and a border and I wanted to use CSS3 transitions to have the div grow and shrink smoothly with a little animation. For some reason my code isn't working. I wrote:

div.div-in-question {
    margin: 0 auto;
    position: relative;
    padding: 0 50px;
    width: 600px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}

It still just grows and shrinks like normal with no animation or smoothness.

asked 1 min ago

Johnston

1,955

CSS3 transitions when div content changes and div grows