CODEWITHSUNDEEP
htmlcsscss-transitions
Aleksandar Milicevic
Aleksandar Milicevic

Reputation: 523

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

Upvotes: 1

Views: 112

Answers (1)

Mitchel Jager
Mitchel Jager

Reputation: 445

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>.

Upvotes: 1

Related Questions