CSS Keyframes - Verzögerung Animation der Inline-Stil

Question

Ich habe eine Keyframes-Animation für ein Balkendiagramm. Die Breiten werden inline mit Stilattributen (von Razor) gesetzt und die Animation funktioniert gut, aber ich kann den Start nicht verzögern. Wenn Sie die Delay-Eigenschaft verwenden, werden alle Balken im Diagramm angezeigt und nach 1s werden sie ausgeblendet und animiert. Mein Ziel ist es, die grünen Balken erst zu zeigen, wenn die Animation läuft.

Ich habe versucht, Deckkraft zu animieren, die Animation CSS mit jQuery und die Balken nicht angezeigt, bis die Animation läuft, aber nichts scheint zu funktionieren.

Here's a JSFiddle.

Irgendwelche Ideen?

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

Die CSS

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

UPDATE

@ Ankith Lösung gut funktioniert hat und wies mich in die richtige Richtung, aber ich war in der Lage jQuery zu verwenden, so mit diesem werde ich kürzere Version. Anscheinend habe ich nur needed to pass the duration zu beiden show() und hide(). Ich habe auch die Tags für diesen Beitrag aktualisiert, weil ich ursprünglich jQuery nicht eingeschlossen hatte.

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

Answer 1

Die Balken zeigen standardmäßig cos der Inline-Styles, und wenn Sie jQuery verwenden, hat es für die jQuery-Ressource warten, bevor hide() oder show() Kicks zu laden.

Vielleicht könnten einige JS sein gut. Bitte säubern Sie es wie Sie es für richtig halten.

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)