Width resizing issue with transaction

Problem

I have a problem with a little animation I made. I've a set of icons displayed vertically and each icon shows a related text when you move the mouse over it.

The issue is that if you move the mouse over the fourth icon and then go over the third, you'll notice that the text is resized twice. I mean that it firstly ends the animation but then it adjust the size of the paragraph containing the text to fit the real width. Although less evident, the problem occurs also with the first icon.

For what I can understand isn't a single browser bug since it occurs on all the browsers.

Do you have any idea of why the browsers act in this way and how to fix?

My HTML is the following:

<aside id="social-bar">
   <div id="facebook">
      <a href="#">
         <img src="icon.png" alt="Facebook icon" />
         <p>Like us on Facebook</p>
      </a>
      <br class="clear-both" />
   </div>
   <div id="twitter">
      <a href="#">
         <img src="icon.png" alt="Twitter icon" />
         <p>Follow us on Twitter</p>
      </a>
      <br class="clear-both" />
   </div>
   <div id="googleplus">
      <a href="#">
         <img src="icon.png" alt="Google+ icon" />
         <p>+1 us on Google+</p>
      </a>
      <br class="clear-both" />
   </div>
   <div id="usergroup">
      <a href="#">
         <img src="icon.png" alt="Wordpress icon" />
         <p>Read our User Group</p>
      </a>
      <br class="clear-both" />
   </div>
</aside>

While my CSS is:

.clear-both {
    clear: both;
}
#social-bar {
    float: left;
    position: absolute;
    z-index: 1;
}
#social-bar > div {
    position: relative;
    margin-bottom: 0.3em;
}
#social-bar a {
    float: left;
    width: 32px;
    height: 32px;
    text-decoration: none;
    overflow: hidden;
    background-color: #333333;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}
#social-bar a:hover, #social-bar a:focus {
    width: 100%;
}
#social-bar img {
    vertical-align: middle;
    float: left;
    padding-right: 0.2em;
}
#social-bar p {
    float: right;
    line-height: 32px;
    font-size: 0.6em;
    color: #FFFFFF;
    margin: 0em;
    padding-right: 1em;
}

Moreover, you can see the problem looking at the jsfiddle I created:

http://jsfiddle.net/mt7ny/

Problem courtesy of: Aurelio De Rosa

Solution

Put your CSS animations on the hover and remove them on the normal styles.

#social-bar a:hover, #social-bar a:focus {
    width: 100%;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}

http://jsfiddle.net/mt7ny/3/

Basically it's still trying to calculate widths for things while it's shrinking tags and expanding others. It just can't think that fast unless there are constant widths set to things.

Solution courtesy of: Sean

Discussion

easiest solution is to change your nice way of thinking

#social-bar a:hover, #social-bar a:focus {
    width: 100%;
}

by

#social-bar a:hover, #social-bar a:focus {
    width: 135px;
}

problem is solved, maybe not as nice as it was :)

Discussion courtesy of: Lukas Greso

This recipe can be found in it's original form on Stack Over Flow.