Aleksandar Milicevic Aleksandar Milicevic - 4 months ago 6x
CSS Question

How to fix animation problems css3

I made an effect for my search input, when it's focused its spreads to 100% width with nice smooth transition, but he also push other

elements and they don't have nice 'animation'. They just 'jump' away from search input.

My html:

<div class="navigation">
<div class="col-lg-6 col-xs-12">
<li><a href="#" class="hover-effect">Home</a></li>
<li><a href="#" class="hover-effect">About</a></li>
<li><input type="search" name="search" placeholder="Search..."></li>


.navigation {
text-align: right

.navigation ul {
list-style: none;
margin-top: 22px;

.navigation li {
display: inline-block;
font-size: 20px;
padding-right: 12px;

.navigation li a {
color: #d3d5d7;
text-decoration: none;
transition: color 1s;

.navigation li a:hover {
color: #2980b9;
input[type=search] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('../images/searchicon.png');
background-position: 10px 14px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.6s;
transition: width 0.6s;

input[type=search]:focus {
width: 100%;

Any suggestions how to fix this?

Also i made codepan:


This is because it is inside an <li>, which is generally not where you want your <input> to be. You can place it outside of the <ul> and float it, or position it in a different way. This way it will push the content correctly.

I set up a quick fiddle for you here, it's a bit crude, but it shows what it is supposed to show.

If you do however want it in the <li>, animate the <li> instead of the <input>.