Question

我试图反弹包含图像的<div>，但它不起作用，我不确定原因。

这是我的代码：

@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

原因是您使用了两个不同的属性right和left。虽然它们都是位置，但您必须使用相同的属性来执行转换。如果你的容器是固定宽度的，那么它很简单;只需使用left代替right，反之亦然from和to。

另一方面，如果宽度是动态的，那你运气不好;请改用JavaScript。

Answer 2

这是因为两件事。

首先left和right对CSS给出的对象不会做任何事情。这些值仅适用于元素的position不是static（默认值）的情况。

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

弹跳动画不起作用

2 个答案: