2

私は初心者です。このコードが機能しないのはなぜですか? 鳥を飛ばしたい。

私のHTML：

<img src="http://dl.dropboxusercontent.com/u/105046436/tw.png" />
<br>
<div class="twitter-bird"></div>

私のCSS：

.twitter-bird {
    background-image: url(http://dl.dropboxusercontent.com/u/105046436/tw.png);
    display: inline-block;
    height: 38px;
    width: 37.5px;
}

.twitter-bird:hover {
    animation: fly 0.2s steps(3) 0 infinite;
}

@keyframes fly {
    from { background-position: 0 0; }
    to { background-position: -112.5px 0; }
}

JSFiddle : http://jsfiddle.net/6qHMG/

私が欲しいもの：

画像の背景位置を変更したい。

何が起こるのですか：

ホバーしても画像の位置は変わりません。

編集: 背景画像の位置が適切に変更されていないと思います。背景の位置は変わらないようです。background-position:に設定するにはどうすればよい@keyframes flyですか?

4

1 に答える 1

8

ここにあります：

ベンダープレフィックスを追加する必要があります

.twitter-bird {
    height: 38px;
    width: 37.5px;
    background-image: url("http://dl.dropboxusercontent.com/u/105046436/tw.png");
}

.twitter-bird:hover { 
    -webkit-animation: fly .4s steps(3) infinite;
       -moz-animation: fly .4s steps(3) infinite;
        -ms-animation: fly .4s steps(3) infinite;
         -o-animation: fly .4s steps(3) infinite;
            animation: fly .4s steps(3) infinite;
}

@-webkit-keyframes fly {
   from { background-position:    0px; }
     to { background-position: -112.5px; }
}

@-moz-keyframes fly {
   from { background-position:    0px; }
     to { background-position: -112.5px; }
}

@-ms-keyframes fly {
   from { background-position:    0px; }
     to { background-position: -112.5px; }
}

@-o-keyframes fly {
   from { background-position:    0px; }
     to { background-position: -112.5px; }
}

@keyframes fly {
   from { background-position:    0px; }
     to { background-position: -112.5px; }
}

フィドル: http://jsfiddle.net/6qHMG/4/

于 2013-06-14T12:34:40.023 に答える