inviewとグラフのアニメーションの組み合わせをやりたい

Question

inviewとcss3のグラフアニメーションを組み合わせることはできるでしょうか？

表示はすることができたのですが、グラフのうごきが終わった後に表示されてしまします。

組み込みたいグラフは以下の通りです。

//html
<div class="barchart-box">
  <div class="date1" style="width:60%"></div>
  <div class="date2" style="width:40%"></div>
  <div class="date3" style="width:80%"></div>
</div>

//css
.barchart {
  width: 90%;
  margin: 20px auto;
  border: solid 5px #ccc;
}

[class*=date] {
  height: 40px;
  margin: 10px 0;
  background: #ccc;
  -moz-animation: anime1 1s 1 ease;
  -webkit-animation: anime1 1s 1 ease;
  animation: anime1 1s 1 ease;
}

.date1 {
  background: #0c9;
}

.date2 {
  background: #09c;
}

.date3 {
  background: #0cc;
}

@-webkit-keyframes anime1 {
  0% {
    width: 0px;
  }
}
@keyframes anime1 {
  0% {
    width: 0px;
  }
}

//js
$(function() {
$('.barchart').one('inview', function(event, isInView, visiblePartX, visiblePartY) {
$('.barchart').animate({opacity:1}, 300);
	
});
});

Answer 1

すいません。
[class*=date] {
height: 40px;
margin: 10px 0;
background: #ccc;
-moz-animation: anime1 1s 1 ease;
-webkit-animation: anime1 1s 1 ease;
animation: anime1 1s 1 ease;
}
の[class*=date]にちゃんとclassをふって解決しました