0

画像を含むa をバウンスしようとしています<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 */
}
4

2 に答える 2

1

その理由は、2 つの異なるプロパティを使用しているためrightですleft。どちらも配置されますが、トランジションを実行するには同じプロパティを使用する必要があります。コンテナが固定幅の場合は簡単です。と の両方にleftの代わりに、rightまたはその逆を使用してください。fromto

一方、幅が動的な場合は運が悪いです。代わりに JavaScript を使用してください。

于 2012-01-23T02:14:09.793 に答える
1

それは二つの理由による。

まずleft、rightその CSS が与えられたオブジェクトに対して何もしません。これらの値は、要素の が(デフォルト)position以外の場合にのみ適用されます。static

第二に、それらは矛盾する値であるため、探しているアニメーション効果が得られません。あなたが今言っていることは、基本的にこの要素を伸ばすことですが、静的な幅を与えているのでそうではありません。ページ上で画像に正確に何をさせたいですか?

于 2012-01-23T02:15:27.003 に答える