1

簡単な 3 つの画像遷移アニメーション コードを作成しました。コードは次の場所にあります。

http://jsfiddle.net/harshithjv/AF3Jj/

このコードは、chrome および chromium ブラウザーでのみ機能します。Apple の Safari ブラウザでも動作しません。また、他のブラウザでは動作しません (Firefox と IE9 でテストしましたが、Opera は試していません)。

私はanimation省略形のプロパティに何かが欠けていると思います。私を助けてください。

編集：

明確にするためにコードを更新していますが、これは最初に行うべきでした。

HTML コード:

<div class="animated_star"></div>

CSS3 コード:

@-moz-keyframes shining_star {
    from {
        background-image: url('http://findicons.com/icon/download/162253/star_grey/16/ico');
    }
    50% {
        background-image: url('http://findicons.com/icon/download/181769/star_half/16/ico');
    }
    to {
        background-image: url('http://findicons.com/icon/download/159919/star/16/ico');
    }
}

@-webkit-keyframes shining_star {
    from {
        background-image: url('http://findicons.com/icon/download/162253/star_grey/16/ico');
    }
    50% {
        background-image: url('http://findicons.com/icon/download/181769/star_half/16/ico');
    }
    100% {
        background-image: url('http://findicons.com/icon/download/159919/star/16/ico');
    }
}

@keyframes shining_star {
    from{
        background-image: url('http://findicons.com/icon/download/162253/star_grey/16/ico');
    }
    50% {
        background-image: url('http://findicons.com/icon/download/181769/star_half/16/ico');
    }
    to {
        background-image: url('http://findicons.com/icon/download/159919/star/16/ico');
    }
}
.animated_star{
    height: 16px;
    width: 16px;
    float: left;
    -webkit-animation: shining_star 1s infinite; /* works only for Chrome/Chromium */
    -moz-animation: shining_star 1s infinite;
    animation: shining_star 1s infinite;
}
4

2 に答える 2

0

これについて調査した結果、background-imageCSS プロパティはkeyframesほとんどのブラウザでサポートされていないことがわかりました。これは、動的に読み込む画像が多すぎるため、大きな画像が読み込まれるとパフォーマンスの問題が発生する可能性があるためです。

別のstackoverflow link( )について@Morpheusに感謝します。これにより、画像スプライトと再配置(CSSプロパティを使用)で問題を解決し、そのスプライト内で必要に応じて画像を選択することにしました。CSS プロパティの問題は、キーフレームを介して CSS アニメーションに適用すると、再配置によってイメージ スプライト内の動きが表示されることです。でも、3フレームで3つの星が動きなく素早く遷移する様子を見せたかったのです。これを可能にするために、最初の星の位置を 0% と 33% に設定し、2 つ目の星の位置を 34% と 66% に設定し、3 つ目の星を 67% と 100% に設定する 6 つのキーフレームを使用する必要がありました。 .http://stackoverflow.com/questions/7318462/changing-background-image-with-css3-animationsbackground-positionbackground-position

jsFiddle同じ星のイメージ スプライトを持たない を作成しました。オンラインで同じ星のスプライトを見つけることができなかったので、別の星を使用しました。ずさんなアニメーションなので完璧な例ではありませんが48px x 16px、システム上に小さなスプライト イメージ ( ) を作成したので、アニメーションは十分に見栄えがします。

HTML コード:

<div class="animated_star"></div>

CSS コード:

@-moz-keyframes shining_star {
    0% { background-position: -135px 0px; }
    33% { background-position: -135px 0px; }
    34% { background-position: -135px -260px; }
    66% { background-position: -135px -260px; }
    67% { background-position: -270px -260px; }
    100% { background-position: -270px -260px; }
}

@-webkit-keyframes shining_star {
    0% { background-position: -135px 0px; }
    33% { background-position: -135px 0px; }
    34% { background-position: -135px -260px; }
    66% { background-position: -135px -260px; }
    67% { background-position: -270px -260px; }
    100% { background-position: -270px -260px; }
}

@keyframes shining_star {
    0% { background-position: -135px 0px; }
    33% { background-position: -135px 0px; }
    34% { background-position: -135px -260px; }
    66% { background-position: -135px -260px; }
    67% { background-position: -270px -260px; }
    100% { background-position: -270px -260px; }
}

.animated_star{
    height: 130px;
    width: 135px;
    float: left;
    background: transparent url('http://azmind.com/wp-content/uploads/2011/11/social-star-icons.png') no-repeat fixed;
background-position: 0px -390px;
    -webkit-animation: shining_star .5s infinite linear; 
    -moz-animation: shining_star .5s infinite linear;
    animation: shining_star .5s infinite linear;
}

jsFiddleリンク: http://jsfiddle.net/harshithjv/7QvSP/2/

于 2013-04-23T05:37:13.663 に答える