practice

　　　　

<html>
<meta charset="utf-8">

<style>
span{position:absolute;
font-size:16px;
color:black;
font-weight:bold;
line-height:34px;
margin-left:-4;
z-index:20;}
.グラフ{width:300px;
border:solid 1px black;
border-radius:4px;
padding:4px;}
.バー{position:relative;
max-width:500px;
height:30px;
margin:10;
padding:0 0 0 10px;
z-index:10;}
.バー::before{position:absolute;
content:"";
left:0;
top:0;
width:100%;
height:30px;
background:#f8f8f8;
z-index:0;}
.バー::after{position:absolute;
display:block;
content:"";
left:0;
top:0;
width:100%;
height:30px;
background:#aaaaaa;
transition:1s;
animation:bar-before 2 2s;
z-index:10;}
.データ_1::after{max-width:20%;background:#aaffff;}
.データ_2::after{max-width:40%;background:#ffddff;}
.データ_3::after{max-width:60%;background:#aacfff;}
.データ_4::after{max-width:80%;background:#ffddcc;}
.データ_5::after{max-width:100%;background:#ccffcc;}
.データ_6::after{max-width:30%;background:#ffbbbb;}
@keyframes bar-before{0%{width:0px;}
100%{width:100%;}}
</style>

<div class="グラフ">
<div class="バー データ_1"><span>1月 20<span></div>
<div class="バー データ_2"><span>2月 40<span></div>
<div class="バー データ_3"><span>3月 60<span></div>
<div class="バー データ_4"><span>4月 80<span></div>
<div class="バー データ_5"><span>5月 100<span></div>
<div class="バー データ_6"><span>6月 30<span></div>
</div>

</html>