0

我正在尝试反弹<div>包含图像的 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 */
}
4

2 回答 2

1

原因是您使用了两个不同的属性，right并且left. 尽管它们都定位，但您必须使用相同的属性来执行转换。如果你的容器是固定宽度的，那很简单；只需对 and 使用代替left，right反之亦然。fromto

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

于 2012-01-23T02:14:09.793 回答
1

那是因为两件事。

首先left，right不会对给定 CSS 的对象做任何事情。position仅当元素的 不是static（默认值）时，这些值才适用。

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

于 2012-01-23T02:15:27.003 回答