CODEWITHSUNDEEP
htmlcss
URL87
URL87

Reputation: 11012

Transition with initial css attribute value

Suppose I have the follow transition on height attribute -

.testDiv {
    height : 400px ; 
    -webkit-transition: height 2s,  -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition:  height 2s, transform 2s;
}

.testDiv.hide {
    height : 0px ;
}

Here is its jsFiddle demo

Now , I want to get the same transition - from height 0px to 400px , but such that it would start with height:200px immediately and will make animation on its rest - (from 200px - 400px) ,

i.e -

  1. on start - height:0px

  2. once clicked -

    2.1 height:200px immediatly

    2.2 height:200px to height:400px with transition .

How to get it ?

Upvotes: 1

Views: 38

Answers (1)

George G
George G

Reputation: 7695

Add min-height

min-height: 200px;

http://jsfiddle.net/8bbo9cfz/2/

Upvotes: 1

Related Questions