Barryman9000 Barryman9000 - 1 year ago 96
jQuery Question

CSS Keyframes - delay animation of inline style

I have a keyframes animation for a bar graph. The widths are set inline with style attributes (coming from Razor) and the animation works fine but I'm not able to delay it's start. Using the delay property of

shows all bars in the graph, then after 1s they hide and animate. My goal is to not show the green bars at all until the animation runs.

I've tried animating opacity, toggling the animation css with jQuery and not displaying the bars until the animation runs but nothing seems to work.

Here's a JSFiddle.

Any ideas?

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


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


@Ankith's solution worked well and pointed me in the right direction, but I was able to use jQuery so I'm going with this shorter version. Apparently I just needed to pass the duration to both
. I also updated the tags on this post because I hadn't originally included


Answer Source

The bars show by default cos of the inline styles and if you use jQuery, it has to wait for the jQuery resource to load before hide() or show() kicks in.

So maybe some JS might be good. Please clean it up as you see fit.

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)