Move search box on the top by using CSS animation - html

Question

I need to move my search box when user focus on it. I am using css animation and that is working but not working fine. I want to make like the current search box is moving up but right now it is seems like new search box is replacing the current search box.
$('input').focus(function(){
$('.search').addClass('fixed');
})
$('input').blur(function(){
$('.search').removeClass('fixed');
})
body{
margin:0
}
.banner{
height:200px;
background:#ff0000
}
.search{}
.search-bar{ height:50px; background:#666; padding-top:10px}
.search-bar input{width:100%; height:35px}
.animated{background:#fff; opacity:0; position:fixed; bottom:0; height:0px; transition:height 0.5s; width:100%}
.fixed .animated{ height:100%; opacity:1}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
<div class="banner">
</div>
<div class="search">
<div class="search-bar">
<input type="text">
</div>
<div class="animated">
<div class="search-bar">
<input type="text">
</div>
</div>
</div>
<div class="body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
</div>
</div>

Answer 1

Here is a sample having the same animation using only 1 search box (input)
$('input').focus(function(){
$('.search').addClass('fixed');
})
$('input').blur(function(){
$('.search').removeClass('fixed');
})
html, body {
margin: 0
}
.banner {
height: 200px;
background: #ff0000
}
.search-bar {
height: 50px;
background: #666;
padding-top: 10px
}
.search-bar input {
width: 100%;
height: 35px
}
.search {
transition: bottom 0.5s, top 0.5s;
background: #ddd;
width: 100%;
min-height: 50px;
top: 200px;
bottom: 40%;
}
.search.fixed {
transition: bottom 0.5s, top 0.5s;
top: 0;
bottom: 0;
position: fixed;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
<div class="banner">
</div>
<div class="search">
<div class="search-bar">
<input type="text">
</div>
</div>
<div class="body">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
</p>
</div>
</div>