Question

This is weird. seems like i have got all the syntax correct. Still not working as expected on any browser? any help?

btw: I know about -moz,-webkit, -o prefix stuff. I also tried with those. It’s just isn’t working

I want a slow bounce effect. Here’s my complete jsFiddle

div {
    width:24px;
    height:24px;
    position:relative;
    left:0px;
    top:0px;
    animation:glide 5s linear 2s ease-in-out alternate;
}

@keyframes glide {
    from {left:0px; top:0px;}
    to {left:0px; top:20px;}
}

Answer 1

Your animation declaration is a bit messy. You have to declare only one timing, one easing and so on… For example you’re declaring 5s and then 2s, and then two different easings.

Here’s a working fiddle (view in Chrome/Safari): http://jsfiddle.net/gleezer/RaXgq/10/