CSSで棒グラフ(アニメーション付き)
@import url('https://fonts.googleapis.com/css?family=Roboto');
.content {
position: relative;
width: 800px;
height: 350px;
background: #fafafa;
margin: 0 auto;
padding: 0;
overflow: hidden;
&:before {
position: absolute;
content: "";
width: 1px;
height: 100%;
background: #ece7e7;
top: 0;
left: 50%;
}
&:after {
position: absolute;
content: "";
width: 50%;
height: 100%;
top: 0;
left: 25%;
border-left: 1px solid #ece7e7;
border-right: 1px solid #ece7e7;
background: transparent;
}
.graph {
height: 12%;
max-height: 50px;
position: absolute;
left: 0;
animation: graphanime 2.5s forwards;
z-index: 2;
span {
position: absolute;
font-size: 14px;
font-family: 'Roboto', sans-serif;
right: 5%;
top: 32%;
color: #ffffff;
}
&.item01 {
top: 20%;
background: linear-gradient(90deg, #7dccfe,#1e98ff);
width: 80%;
}
&.item02 {
top: 45%;
background: linear-gradient(90deg, #8bd5b2, #0acf70);
width: 65%;
}
&.item03 {
top: 70%;
background: linear-gradient(90deg, #bb8edd, #9941db);
width: 55%;
}
}
}
@keyframes graphanime{
0% {
transform: translateX(-200%);
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
<div class="content">
<div class="graph item01">
<span>item01</span>
</div>
<div class="graph item02">
<span>item02</span>
</div>
<div class="graph item03">
<span>item03</span>
</div>
</div>