ホバリング時のトランジションボタン

Question

この2048x512イメージには4段階のトランジションがありますが、動作させる方法を理解できません。

私はそれを上に乗せたときに最終段階に変更する方法を知っていますが、どのようにしてtransition効果を追加しますか？

#instagram { 
    width: 512px; height: 512px; 
    background: url('/host/instagram.png') no-repeat left top; 
} 
#instagram:hover { background-position: -1542px 0px } 

Answer 1

全てのフレームが同じカラーパレット（白、グレー、黒）の一部であるとして、あなたは本当に、この特定の例の移行を必要としません。 hoverに自分の色をtransitionプロパティで、変化する：あなたは、いくつかのフォントベースのアイコンを（フォント素晴らしいすなわち）：使用して、同様の（同一ではないが、短いタイマーの大差ない）効果を達成することができますjsfiddle

HTML：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
... 
... 
<div class="icon-circle"> 
    <i class="fa fa-instagram"></i> 
</div> 

CSS：

.icon-circle { 
    position: relative; 
    border-radius: 50%; 
    width: 512px; 
    height: 512px; 
    border: 2rem solid black; 
    transition: all .8s linear; 
} 
.icon-circle:hover { 
    background-color: black; 
    color: white; 
} 
.fa-instagram { 
    font-size: 20rem; 
    position: absolute; 
    transform: translate(-50%, -50%); 
    top: 50%; 
    left: 50%; 
} 

ただし、SPRのために、とにかく画像を使用したいならばITEの画像は、あなたはそれがsteps()プロパティでCSS animationを使用して行います。jsfiddle

HTML：

<div id="instagram"></div> 

CSS：私は完全にあなたの質問を理解していない

#instagram { 
    width: 512px; height: 512px; 
    background: url('http://andreimartalog.com/host/instagram.png') no-repeat; 
} 
#instagram:hover { animation: enter 0.3s steps(3) forwards; } 
@keyframes enter { 100% { background-position: -1536px } }