减少代码CSS3动画条形图的数量？

Question

我正在使用CSS3制作动画条形图。我的code can be viewed here。我想（如果可能的话）减少我在CSS中设置的疯狂动画量。目前，图表上的每个条形都使用它自己的独立动画，从0px宽度到每个条形专用的可变宽度。例如：

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

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

无论如何，我可以为所有条形设置一个动画，这样我就不必为每个条形图分别设置动画了吗？就像在php中一样，你可以将一个变量传递给一个函数，还是其他一些替代函数？

Answer 1

您可以使用固定宽度的div作为容器，并在容器内为图形设置动画。

以下是代码：http://jsfiddle.net/1beyxxx9/

＆＃13;

＆＃13;

            .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%;
              }
            }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;