Reduce Amount of Code CSS3 Animated Bar Graph?

Question

I'm making an animated bar graph using CSS3. My code can be viewed here. I'd like to (if possible) reduce the crazy amount of animations I have set in the CSS. Currently each bar on the graph uses it's own seperate animation which takes it from 0px width to a variable width that is exclusive to each bar. For example:

        @-webkit-keyframes bar4 {
            from {width: 0px;}
            to {width: 150px;}
        }

        /* Standard syntax */
        @keyframes bar4 {
            from {width: 0px;}
            to {width: 150px;}
        }

Is there anyway I can set up just one animation for all the bars so that I don't have to have separate animations for each bar? Like in php how you can just pass in a variable to a function, or some other alternative?

Answer 1

You can use fixed width divs as containers and animate your graph inside the container.

Here is the code: http://jsfiddle.net/1beyxxx9/

            .bar {
              width: 0px;
              height: 25px;
              margin-top: 10px;
              background: #0CFF0E;
            }
            #div_1 {
              -webkit-animation: bar 1s linear;
              /* Chrome, Safari, Opera */
              animation: bar 1s linear;
              -webkit-animation-fill-mode: forwards;
            }
            #div_2 {
              -webkit-animation: 1s bar .15s linear;
              /* Chrome, Safari, Opera */
              animation: 1s bar .15s linear;
              -webkit-animation-fill-mode: forwards;
            }
            #div_3 {
              -webkit-animation: 1s bar .30s linear;
              /* Chrome, Safari, Opera */
              animation: 1s bar .30s linear;
              -webkit-animation-fill-mode: forwards;
            }
            #div_4 {
              -webkit-animation: 1s bar .45s linear;
              /* Chrome, Safari, Opera */
              animation: 1s bar .45s linear;
              -webkit-animation-fill-mode: forwards;
            }
            #div_5 {
              -webkit-animation: 1s bar .60s linear;
              /* Chrome, Safari, Opera */
              animation: 1s bar .60s linear;
              -webkit-animation-fill-mode: forwards;
            }
            #div_6 {
              -webkit-animation: 1s bar .20s linear;
              /* Chrome, Safari, Opera */
              animation: 1s bar .75s linear;
              -webkit-animation-fill-mode: forwards;
            }
            #div_7 {
              -webkit-animation: 1s bar .90s linear;
              /* Chrome, Safari, Opera */
              animation: 1s bar .90s linear;
              -webkit-animation-fill-mode: forwards;
            }
            #div_8 {
              -webkit-animation: 1s bar 1.05s linear;
              /* Chrome, Safari, Opera */
              animation: 1s bar 1.05s linear;
              -webkit-animation-fill-mode: forwards;
            }
            #div_9 {
              -webkit-animation: 1s bar 1.30s linear;
              /* Chrome, Safari, Opera */
              animation: 1s bar 1.30s linear;
              -webkit-animation-fill-mode: forwards;
            }
            /* Chrome, Safari, Opera */
            @-webkit-keyframes bar {
              from {
                width: 0%
              }
              to {
                width: 100%;
              }
            }

<div style="width:200px;">
  <div class="bar" id='div_1'></div>
</div>
<div style="width:100px;">
  <div class="bar" id='div_2'></div>
</div>
<div style="width:150px;">
  <div class="bar" id='div_3'></div>
</div>
<div style="width:20px;">
  <div class="bar" id='div_4'></div>
</div>
<div style="width:75px;">
  <div class="bar" id='div_5'></div>
</div>
<div style="width:110px;">
  <div class="bar" id='div_6'></div>
</div>
<div style="width:120px;">
  <div class="bar" id='div_7'></div>
</div>
<div style="width:40px;">
  <div class="bar" id='div_8'></div>
</div>
<div style="width:140px;">
  <div class="bar" id='div_9'></div>
</div>