CSSだけでスライドアニメーションする横棒グラフ

2018年5月13日2019年6月12日CSSデザイン,CSS,CSSアニメーション

See the Pen CSSだけでスライドする横棒グラフ by yochans (@yochans) on CodePen.

CSSだけでスライドアニメーションする横棒グラフです

animation@keyframesを利用して個別に設定した横幅を0%から100％にアニメーションを指定しています

スライドする横棒グラフのサンプルコード

HTML

<div class="graph">
 <div class="bar bar1">A</div>
 <div class="bar bar2">B</div>
 <div class="bar bar3">C</div>
 <div class="bar bar4">D</div>
</div>

CSS

.bar{
  max-width: 600px;
  width: 100%;
  margin: 1em;
  color: white;
  padding: 0.25em;
  animation: bar-animation 1 2s;
  background: #0091EA;
}

.bar1{
  max-width: 70%;
}
.bar2{
  max-width: 30%;
}
.bar3{
  max-width: 60%;
}
.bar4{
  max-width: 50%;
}

@keyframes bar-animation{
  0%{
    width: 0px;
  }
  100%{
    width: 100%;
  }
}

スライドする横棒グラフのバリエーション

色を個別指定

個別のclassに背景色を指定をしています

See the Pen CSSだけでスライドする横棒グラフ by yochans (@yochans) on CodePen.

中央から広げる

「.bar」に「margin: 1em auto;」を指定してテキストを「text-align:center;」で中央揃えしています

See the Pen CSSだけでスライドする横棒グラフ3 by yochans (@yochans) on CodePen.