Klatka kluczowa nie działa - jquery, css, css3, keyframe

Cześć wszystkim próbuję stworzyć animację klatki kluczowej dla mojego górnego paska i niektórych pól, ale to nie działa, pomóż mi skrzypce

 @-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;
}

i dodaję klasę podczas ładowania strony za pomocą jquery

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

to nie działa

Odpowiedzi:

1 dla odpowiedzi № 1

Oto wszystkie właściwości, z których możesz korzystać keyframes:

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

Zmień kod

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

}

na przykład:

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

Zaktualizowano FIDDLE

---

1 dla odpowiedzi nr 2

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

zaktualizowane skrzypce

---

1 dla odpowiedzi nr 3

Możesz dodać czas trwania do animacji przepływu i odskakiwania klas, jak to pokazano na tym jsfiddle

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

---

1 dla odpowiedzi nr 4

Zaktualizowałem twoje skrzypce

To, co przegapiłeś, to to, że musisz podać czas trwania animacji, a nie tylko wywoływać nazwę animacji.

Klasa w twoim skrzypce wygląda teraz tak:

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

Nie zapomnij też o -moz-, -ms-, -o-.

---