CSS Transition not working correctly

Question

I have a progress bar from code that I got off a website, now what I'm trying to do is add a transition whenever the percent changes, so that then it does not simply "snap" to the position, rather a ease, but for some reason it won't work

Heres the mark up

<div class="meter">
<span style="width: 25%"></span>
</div>

And the CSS

 .meter { 
height: 20px;  /* Can be anything */
position: relative;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;

   -webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
       -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
           border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
 -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
     -moz-border-radius-bottomleft: 20px;
            border-top-left-radius: 20px;
         border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0, rgb(43,194,83)),
  color-stop(1, rgb(84,240,84))
 );
background-image: -webkit-linear-gradient(
  center bottom,
  rgb(43,194,83) 37%,
  rgb(84,240,84) 69%
 );
background-image: -moz-linear-gradient(
  center bottom,
  rgb(43,194,83) 37%,
  rgb(84,240,84) 69%
 );
background-image: -ms-linear-gradient(
  center bottom,
  rgb(43,194,83) 37%,
  rgb(84,240,84) 69%
 );
background-image: -o-linear-gradient(
  center bottom,
  rgb(43,194,83) 37%,
  rgb(84,240,84) 69%
 );
-webkit-box-shadow: 
  inset 0 2px 9px  rgba(255,255,255,0.3),
  inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow: 
  inset 0 2px 9px  rgba(255,255,255,0.3),
  inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;

}

And here's the code I put into .meter > span

   transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;

And here's a jsbin link. Any help would be appreciated

Answer 1

If you want the width to be transitioned, use transition: width (and then the time, function, etc.)

transition will transition whatever property you tell it to, or you can use the keyword all to transition all properties - but use with care! Chrome doesn't do too well with this when zooming...

Aside: Your border radius code could be a lot simpler:

border-radius: 8px 8px 20px 20px;

Prefixes haven't been needed in a long time.