CSS Keyframes - delay animation of inline style

Question

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 animation 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>

The CSS

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

UPDATE

@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 show() and hide(). I also updated the tags on this post because I hadn't originally included jQuery.

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

AA2992 · Accepted Answer · 2016-07-15 03:05:25Z

1

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)

answered Jul 15, 2016 at 3:05

AA2992

1,6373 gold badges18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Duderino9000 Over a year ago

I think I tried this same thing with jQuery - so it was the lag in time to actually load jQuery that caused the bars to show before starting the animation? Here's my cleaned up version, thanks again! jsfiddle.net/barryman9000/rd34j2kf/5

Collectives™ on Stack Overflow

CSS Keyframes - delay animation of inline style

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related