ホバー上のCSSアニメーション

私はCSSのアニメーションで少し助けが必要です。 CSSでこれを http://jsfiddle.net/nmsdvid/TdnVs/ にするにはどうすればいいですか?ですから、私がホバリングしている間、krab divの上にマウスを置くと、cssアニメーションが開始され、イメージ(vws02.pngよりもvws01.png)が切り替わります。

1
あなたはそれをうまくやっています(最初の静止画像、アニメーションGIFの2番目の画像)、CSSは何も開始したり停止したりすることはできません。
追加された 著者 Luca Filosofi,

2 答え

あなたが与えたカニの例は、CSSでのみ行われます。画像のホバーでは、画像形式を変更しました。 http://nmsdvid.com/images/vws01.pngから http://nmsdvid.com/images/gif.gif にアクセスしてください。 2番目の画像が表示されている場合は、既に.gif画像(アニメーション画像)です。

2
追加された

ここでチェックする

#krab {         幅:335px;         高さ:345px;         背景画像:URL(https://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg);     }

#krab:hover { background-image:url(https://image.winudf.com/v2/image/Y29tLnp6d3BuZXcudGlnZXIzRF9zY3JlZW5zaG90c18wX2NhZWNhNzYz/screen-0.jpg?h=355&fakeurl=1&type=.jpg); }

デモ:http://jsfiddle.net/TdnVs/4/

1
追加された