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，它必须等待 jQuery 资源在 hide() 或 show() 启动之前加载。

所以也许一些 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)