Key frame is not working

Question

Hi all am trying to create keyframe animation for my top-bar and some boxes but its not working, help me out my fiddle

 @-webkit-keyframes flow{

    0% {
        top:-100px;
    }

    100% {
        top: 75px;
    }

}
@keyframes flow{

    0% {
        top:-100px;
    }

    100% {
        top: 75px;
    }

}

.animate-flow{
    -webkit-animation-name: flow;
            animation-name: flow;
}

and i add the class while page load using jquery

$('.top-bar').addClass('animate-flow');

its not working

Answer 1

Here are all the different properties you can use with keyframes:

animation-name:;
 animation-duration:;
 animation-iteration-count:;
 animation-direction:;
 animation-timing-function:;
 animation-fill-mode:;
 animation-delay:;

Change you code

.animate-flow{
-webkit-animation-name: flow;
        animation-name: flow;

}

to e.g.:

.animate-flow{
    -webkit-animation: flow 3s ease-in-out;
            animation: flow 3s ease-in-out;
}

Updated FIDDLE

Answer 2

.animate-flow{
animation: flow 5s;
-webkit-animation: flow 5s; /* Safari and Chrome */
}

updated fiddle

Answer 3

You can add duration to animate-flow and bounce classes like what's shown at this jsfiddle

 -webkit-animation-duration: 1s;
  animation-duration: 1s;

Answer 4

I updated your fiddle

What you missed is that you need to give a duration of the animation not just call the animation name.

So a class in your fiddle now looks like this:

.animate-flow{
    animation:3s flow;
    -webkit-animation:3s flow;    
}

Also don't forget about -moz-, -ms-, -o- too.