[CSS3]마주보는 막대그래프, 동적으로 @-webkit -keyframes width 조절하기

이번 승부예측 프로그램에서  내가 제일 헤맸던 그래프파트

혼자 삽질해도 안되고 라이브러리엔 원하는 그래프가 없어서

찾다찾다 CodePen에서 비슷한 그래프를 가져와서 커스텀했다.

 

1. 마주보는 막대그래프 코드

 

 

<CSS 코드>

/* 그래프 전체적 애니메이션 설정*/
.bar-graph{
	  -webkit-animation: fade-in-text 2.2s 0.1s forwards;
	  -moz-animation: fade-in-text 2.2s 0.1s forwards;
	  animation: fade-in-text 2.2s 0.1s forwards;
	  opacity: 0;
	}
	
    /*막대그래프를 담고있는 영역 설정*/
	.bar-graph-horizontal {
	  max-width: 90%;
	  margin: 0 auto;
	}
	
    /*각 그래프의 위치설정*/
	.bar-graph-horizontal .bar-away{
	  float: left;
	  margin-bottom: 8px;
	  display:contents;
	}
	.bar-graph-horizontal .bar-home{
	  float: right;
	  margin-bottom: 8px;
	   display:contents;
	}
	
	/*각 그래프의 모양 설정*/
	.bar-graph-horizontal .bar-away .bar {
	  border-radius: 3px;
	  height: 55px;
	  float: left;
	  overflow: hidden;
	  position: relative;
	  width: 0;
	}
	
	.bar-graph-horizontal .bar-home .bar {
	  border-radius: 3px;
	  height: 55px;
	  float: right;
	  overflow: hidden;
	  position: relative;
	  width: 0;
	}
	
    /*그래프 위의 글자 설정 필수 아님*/
	.bar-graph-one .bar-away .bar::after {
	  -webkit-animation: fade-in-text 2.2s 0.1s forwards;
	  -moz-animation: fade-in-text 2.2s 0.1s forwards;
	  animation: fade-in-text 2.2s 0.1s forwards;
	  color: #fff;
	  content: attr(data-percentage);
	  font-weight: 700;
	  position: absolute;
	  right: 16px;
	  top: 17px;
	}
	
	.bar-graph-one .bar-home .bar::after {
	  -webkit-animation: fade-in-text 2.2s 0.1s forwards;
	  -moz-animation: fade-in-text 2.2s 0.1s forwards;
	  animation: fade-in-text 2.2s 0.1s forwards;
	  color: #fff;
	  content: attr(data-percentage);
	  font-weight: 700;
	  position: absolute;
	  left: 16px;
	  top: 17px;
	}
	
	.bar-graph-one .bar-away .bar {
	  -webkit-animation: show-bar-one 1.2s 0.1s forwards;
	  -moz-animation: show-bar-one 1.2s 0.1s forwards;
	  animation: show-bar-one 1.2s 0.1s forwards;
	}
	
	.bar-graph-one .bar-home .bar {
	  -webkit-animation: show-bar-two 1.2s 0.2s forwards;
	  -moz-animation: show-bar-two 1.2s 0.2s forwards;
	  animation: show-bar-two 1.2s 0.2s forwards;
	}
	
	/* Bar Graph Horizontal Animations */
	@-webkit-keyframes show-bar-one {
	  0% {
	    width: 0;
	  }
      100%{
      	widht:50.76;
        }
	}
	
	@-webkit-keyframes show-bar-two {
	  0% {
	    width: 0;
	  }
      100%{
      	widht:49.24;
        }
	}
    
    /*글씨 투명도설정*/
	@-webkit-keyframes fade-in-text {
	  0% {
	    opacity: 0;
	  }
	  100% {
	    opacity: 1;
	  }
	}

 

<HTML코드>

<div class="graph">
	<section class="bar-graph bar-graph-horizontal bar-graph-one">
    	<div class="bar-away">
        	<div class="bar" data-percentage='50.76%'></div>
		</div>
		<div class="bar-home">
			<div class="bar" data-percentage='49.24%'></div>
		</div>
	</section>
<div>

 

2. 동적으로 @-webkit -keyframes width 조절

 

윗 코드대로 하면 정적으로 그래프의 width가 고정되기때문에 

매일매일 바뀌는 야구경기의 그래프 Percent를 손으로 쳐줘야하는 불편함이 있다.

그리고 이렇게 하는건 프로그램이 아니라 그냥 정적페이지를 만드는 것이기 때문에

여러방법을 찾았다.

 

JS에서 Ajax를 통해서 값을 받아 width를 조절해야했기 때문에 여러 방법을 찾아봤었는데

사실 너무 어렵거나 Carousel위에 올리면 슬라이드가 동작하는 동안

계속적으로 keyframes가 작동하지 않았다.

 

해결책

	@-webkit-keyframes show-bar-one {
	  0% {
	    width: 0;
	  }
	}
	
	@-webkit-keyframes show-bar-two {
	  0% {
	    width: 0;
	  }
	}
    

1. Ajax를 통해 받아온 값을 js에서 lnlin CSS를 통해 width만 지정해주거나

CSS태그를 사용해 Width를 정해준다.

 

 

2. 그리고 webkit keyframes에 100%로 부분을 지워준다.

 

정말 쉬운방법이였는데 이걸로 3일 삽질..