Make animation of tab changing

See more:

HTML

HTML5

bootstrap

Here is my code, with bootstrap css

<br />
 <ul class="nav nav-tabs"><br />
                    <li><a href="#aaa" data-toggle="tab">AAA</a></li><br />
                    <li><a href="#bbb" data-toggle="tab">BBB</a></li><br />
                    <li><a href="#ccc" data-toggle="tab">CCC</a></li><br />
                </ul><br />
                <div class="tab-content" id="tabs"><br />
                    <div class="tab-pane" id="aaa"><br />
                       ...Content 1...<br />
                    </div><br />
                    <div class="tab-pane" id="bbb">...Content 2...</div><br />
                    <div class="tab-pane" id="ccc">...Content 3...</div><br />
                </div>

-------------CSS---------
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
color: #555;
cursor: default;
background-color: transparent;
border: 0px solid #ddd;
border-bottom: 5px solid red;
}
.nav>li>a {
position: relative;
display: block;
padding: 5px 15px;
}

Now while click on second tab, the bottom red to animate to another clicked tab.

AAA BBB CCC
---
Cliking BBB tab animate like this

AAA BBB CCC
.---
AAA BBB CCC
..---
AAA BBB CCC
...---
AAA BBB CCC
....---
AAA BBB CCC
......---
AAA BBB CCC
..........---

Here no dots to move underscore i used like this the spaces are vanished sry

Thanks in advance..........