I was trying to design my own personal CV website. I need to use two CSS files in my HTML file. Everything works pretty great, except one thing. I am using this Horizontal Bar Graph for my Webpage. As you can see, the graph has a slight flowing motion in it. But the problem is, my webpage also has the same transition effect, so now both of them are overlapping. This is the code which gives the transition:

.spotlights>section>.content > .inner {
  -moz-transform     : translateX(0) translateY(0);
  -webkit-transform  : translateX(0) translateY(0);
  -ms-transform      : translateX(0) translateY(0);
  transform          : translateX(0) translateY(0);
  -moz-transition    : opacity 1s ease, -moz-transform 1s ease;
  -webkit-transition : opacity 1s ease, -webkit-transform 1s ease;
  -ms-transition     : opacity 1s ease, -ms-transform 1s ease;
  transition         : opacity 1s ease, transform 1s ease;
  opacity            : 1;
} 

This is the transition used for every element which is under the <div> tag with class name inner. Now, the code shown below is the transition used for my Horizontal Bar Graph:

graph-bar {
  background-color   : #59BAC0;
  -webkit-transition : all 1s ease-out;
  -moz-transition    : all 1s ease-out;
  -o-transition      : all 1s ease-out;
  transition         : all 1s ease-out;
  border-radius      : 2px;
  cursor             : pointer;
  margin-bottom      : 10px;
  position           : relative;
  z-index            : 9999;
  display            : block;
  height             : 20px;
  width              : 0%;
}

As you can see, both of them have -webkit-transition: , -moz-transition:; , -o-transition: with different values. Due to this, both of them overlap each other, so whenever I add this Horizontal Bar Graph to my website, everything works, except the flow movement of the graph.

What should I do now in this stage? Please Help Me :(