Css 反弹动画赢得'；行不通

我正在尝试跳出一个包含图像的a

，但它不起作用，我不知道为什么

这是我的代码：

@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 */
}

---

原因是您使用了两个不同的属性，

right

和

left

。虽然它们都是位置，但必须使用相同的属性来执行转换。如果你的容器是固定宽度的，那么它很简单；只需使用

left

而不是

right

即可，反之亦然，用于

from

和

to

---

另一方面，如果宽度是动态的，你就不走运了；改用JavaScript。

这是因为两件事

首先，

left

和

right

不会对给定CSS的对象执行任何操作。仅当元素的

位置

不是

静态

（默认值）时，这些值才适用

---

其次，它们是相互冲突的值，因此无法获得所需的动画效果。你现在说的基本上是拉伸这个元素，除非你给了它一个静态宽度，所以它不会。您希望图像在您的页面上具体做什么？

以什么方式“不起作用”？就我个人而言，我会用一些非常简单的JS来做这件事——CSS是用来设计样式，而不是制作动画的。@Kolink:CSS更适合制作动画。有些事情。可能不是这样。它显示图像，但图像不会反弹。@Kolink:Beg difference:Now你去填写JS部分；）继续，使用jQuery。@minitech:好了。当然，对于更复杂的动画，我的方法更有效。在这种情况下，您需要设置

左

或

右

。不过，正如@minitech所说，如果您希望它跨越一个动态宽度，那么在JS中可能会更容易。此外，您还需要设置

动画迭代计数：无限

以连续执行，并设置

动画方向：交替

以来回执行。谢谢@Ktash！你帮了大忙！