CSSスプライトを使ってきたような箇所

自分の場合、CSSスプライトを用いるのはマウスオーバーして、
パチっと一瞬読み込みが入ってはまずい箇所だけである。

(まずい例)

ただ、CSSスプライトを使うとゆっくり変化できないと思ってた。

こんな感じ

こんな感じにゆっくり変化されてもなあ・・という感じ。
ただゆっくり変化が実現できたので書き留めておく。

完成図

（moreボタンは別途transitionでやってます、見てほしいのは丸画像の部分）

必要なもの

変化前と変化後の画像を2枚。（例の場合は、くっきり画像とぼかし画像の2枚）
CSSスプライト用の連結画像は使いません。

.bgsp {
    display:block;
    width:100px;
    height:50px;
    position:relative;
    background: url(bg01.png) left top no-repeat;
}
.bgsp:hover:after {
    content:"";
    width:100px;
    height:50px;
    position:absolute;
    top:0;
    left:0;
    opacity:1;
    background: url(bg01_blur.png) left top no-repeat;
    animation:fadein .3s;
}
@keyframes fadein {
    0% { opacity: 0; }
    25% { opacity: 0.25; }
    50% { opacity: 0.5; }
    75% { opacity: 0.75; }
    100% { opacity: 1; }
}

元画像に疑似要素で変化後画像を重ねて透過しつつ表示するだけ。その際にanimationを付けています。
疑似要素使うと、パチッと一瞬読み込みが入らないようで一安心。

ただ、ちょっと調べただけだとマウスを外した際にもふわっと変化させるのはうまくいかなかった。
逆のanimation指定を作って親要素に指定するだけらしいんですが、、

CSSスプライトでも、animationでstepプロパティを使うと出来るかも

調べてたらCSSスプライト用の連結画像でも、stepというのを使うと変化を刻むことができるそう。
ただそれ用の画像用意するのもメンテするのも面倒極まりないと思うんで。。

CSSも工夫次第でかなり色々実現できるようになってきたので、他にもうまいやり方・書き方あると思います。