javascript - 不能对一个元素使用两个过渡

Question

我试图设计自己的个人简历网站。我需要在我的 HTML 文件中使用两个 CSS 文件。一切都很好，除了一件事。我正在为我的网页使用这个水平条形图。如您所见，图形中有轻微的流动运动。但问题是，我的网页也有同样的过渡效果，所以现在两者都是重叠的。这是给出转换的代码：

.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;
} 

这是用于<div>带有 class name 的标签下的每个元素的转换inner。现在，下面显示的代码是用于我的水平条形图的转换：

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%;
}

如您所见，它们都有-webkit-transition:, -moz-transition:;,-o-transition:具有不同的值。因此，它们都相互重叠，所以每当我将此水平条形图添加到我的网站时，除了图形的流动运动之外，一切正常。

在这个阶段我现在应该做什么？请帮我 ：（

标签： javascripthtmlcssstyling