Bounce animation won't work

Question

I'm trying to bounce an a <div> containing an image, but it won't work and I'm not sure why.

This is my code:

@keyframes bounce
{
    from {
        left: 0px;
    }
    to {
        right: 30px;
    }
}

@-moz-keyframes bounce /* Firefox */
{
    from {
        left: 0px;
    }
    to {
        right: 30px;
    }
}

@-webkit-keyframes bounce /* Safari and Chrome */
{
    from {
        left: 0px;
    }
    to {
        right: 30px;
    }
} 

#DanielFace
{
    background-repeat: no-repeat;
    width: 145px;
    height: 165px;
    background-image: url(../images/daniel/fun.png);
    animation: bounce 1s;
    -moz-animation: bounce 1s; /* Firefox */
    -webkit-animation: bounce 1s; /* Safari and Chrome */
}

Answer 1

That is because of two things.

First left and right won't do anything with the object given that CSS. Those values will only apply if the position of the element is something other than static (the default).

Secondly, they are conflicting values, so you will not get the animated effect you are looking for. What you are saying now is basically stretch this element, except you've given it a static width so it won't. What do you want the image to do on your page exactly?

Answer 2

The reason is you're using two different properties, right and left. Although they both position, you must use the same property to perform the transition. If your container is fixed-width, then it's simple; just use left instead of right or vice-versa for both from and to.

On the other hand, if the width is dynamic, you're out of luck; use JavaScript instead.