Animation How to - Create css3 transitions on height

Question

We would like to know how to create css3 transitions on height.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
    #container{<!--  w ww  . j a v a  2 s  . com-->
    width:400px;
    height:400px;
    background-color:blue;
}
#content1{
    width:100px;
    height:50px;
    background-color:black;
    transition:height 2s cubic-bezier(.25,.25,0,.25), width 2s;
    -webkit-transition:height 2s cubic-bezier(.25,.25,0,.25), width 2s; /* Safari */    
}
#content1:hover{
    height:300px;    
    width:200px;
}
  </style>
</head>
<body>
    <div id="container">
    <div id="content1"></div>
</div>
</body>
</html>

The code above is rendered as follows: