jquery - CSS Keyframes - 内联样式的延迟动画

Question

我有一个条形图的关键帧动画。宽度与样式属性(来自 Razor)内联设置，动画效果很好，但我无法延迟它的开始。使用 animation 的延迟属性显示图表中的所有条形，然后在 1 秒后它们隐藏并动画化。我的目标是在动画运行之前根本不显示绿色条。

我试过设置不透明度动画，使用 jQuery 切换动画 css，并且在动画运行之前不显示条形，但似乎没有任何效果。

Here's a JSFiddle .

有什么想法吗？

<div class="bar" style="width: 80%"></div>

CSS

@keyframes graph-bar {
    0% {
        width: 0;
    }
}
.bar {
       background-color: green;
       height: 20px;
       cursor: pointer;
       animation: graph-bar 1s ease-out;
 }

更新

@Ankith 的解决方案运行良好并为我指明了正确的方向，但我能够使用 jQuery，所以我将使用这个较短的版本。显然我只是needed to pass the duration show() 和 hide()。我还更新了这篇文章中的标签，因为我最初没有包含 jQuery。

$('.bar').hide(0).delay(2000).show(0);

Answer 1

条形图默认显示内联样式的 cos，如果您使用 jQuery，它必须在 hide() 或 show() 之前等待 jQuery 资源加载> 开始。

所以也许一些 JS 可能是好的。请按您认为合适的方式清理它。

JS Fiddle

var bar = document.getElementsByClassName("bar")

// hide all bars by default
for (var i = 0; i < bar.length; i++){
  bar[i].style.display = 'none';
}

// remove display none so the css animation kicks in
function reveal_bar() {
  for (var i = 0; i < bar.length; i++){
    bar[i].style.display = '';
  }
}

// settimeout to call function
setTimeout((reveal_bar), 1500)