Bootstrap 3 - Textarea Transition

by yassinezerguine

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/united/bootstrap.min.css">
<div id="form2" >
<a href="#" class="close" >
    <span class="glyphicon glyphicon-remove-circle" ></span>
    </a>
<div id="senditplus" >
	<form id="senditplusform" onsubmit="return signin()">
	<label id="senditpluslabel1" >SendIt Plus</label>
	<label id="senditpluslabel2" data-i18n="[html]senditpluslabel2">No account yet? see what <a href="" id="plus">Plus</a> has to offer.</label>
	<input type="email" id="senditplusinput1" class="form-control" placeholder="  Email" data-i18n="[placeholder]senditplusinput1" required="required" >
	<input type="password" id="senditplusinput2" class="form-control" placeholder="  Password" data-i18n="[placeholder]senditplusinput2" required="required" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$" title="Password is required and contains at least 1 (uppercase,lowercase,specialcharacters,digit) with 8 characters length">
	<a href="#" id="senditplushref" class="btn btn-link" data-i18n="senditplushref">Forgot your password?</a><br>
	<span id="message3"></span>
	<input type="checkbox" id="senditpluscheckbox" autofocus> <label id="senditplusremember" data-i18n="senditplusremember">Remember Me</label>
	<input type="submit" value="Sign In" class="btn btn-primary" id="senditplusbutton"  data-i18n="[value]senditplusbutton">
	</form>
	</div>
  </div>

CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
    background-image: url("/resources/images/Bitmap.png");
}
#img1{
	content:url("/resources/images/img1.png");
}
#img2{
	content:url("/resources/images/img2.png");
}
#img3{
	content:url("/resources/images/img3.png");
}
#img4{
	content:url("/resources/images/img4.png");
}
#img5{
	content:url("/resources/images/img5.png");
}
#img_dec{
	content:url("/resources/images/decrypted.ico");
}
#img_exp{
	content:url("/resources/images/expire.ico");
}
#verticalbuttons
{
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    position: relative;
    left:-136px;
    top: 2px;
}

#form1{
	opacity: 100%;
	background-image: linear-gradient(-180deg, #FEFEFE 75%, #CACACA 100%);
	border-radius: 20px;
	position: absolute;
    left: 105px;
    top: 125px;
    width: 250px;
    height: 433px;
    
}
#fields{
background-image: linear-gradient(-180deg, #F5F5F5 15%, #FFFFFF 100%);
border: 1px solid #D1D2D3;
//border-bottom: none;
box-shadow: inset 0px 1px 5px 0px rgba(0,0,0,0.20);
border-radius: 20px;
    border-bottom-left-radius: 0em;
    border-bottom-right-radius: 0em;

}

#head{
background-image: linear-gradient(-180deg, #FEFEFE 84%, #CACACA 100%);
border-radius: 20px;
}
#get_file,#btn_add_re,#btn_add_send{
background-image: linear-gradient(-180deg, #F7F7F7 2%, #E2E3E4 100%);
border: 1px solid #D1D2D3;
border-radius: 60px;
text-decoration: none;
color: #46494D;
}

#btn_add_re,#btn_add_send{
position: relative;
left: 20px;
top: 1px;
}
#head_h2, #head_h22{
font-family: Museo-500;
font-size: 21px;
position: relative;
left: 50px;
top: 3px;
color: #46494D;
letter-spacing: -0.48px;
width: 146px;
height: 24px;
}

#namefile, #add-recipient ,#add_sender{
  border-radius: 50px;
  color: #5F401F;
  background: #D1D2D3;
}
ul {
    list-style:none;
    padding-left:20px;
}
li{
  margin: 0 0 3px...