css - 减少代码量 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/

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