Aleksandar Milicevic Aleksandar Milicevic - 5 months ago 13
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

li
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">
<ul>
<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>
</ul>
</div>
</div>


My CSS:

.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: codepan.io

Answer

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. https://jsfiddle.net/176hxsuj/

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

Comments