javascript - jQuery の @keyframes に相当

Question

jQuery を使用して CSS @keyframes アニメーションをエミュレートする方法を探しています。

ユーザーが要素の上にマウスを移動したときに提供される画像のリストに従って、x秒ごとに背景画像を変更する必要があります。
CSS アニメーションは次のようにする必要があります。

.readon:hover {
    animation: readonin 2s;
}

@keyframes readonin {
     0% { background-image: url(1.png); }
    50% { background-image: url(2.png); }
   100% { background-image: url(3.png); }
}

Spritely のようなプラグインを見つけましたが、それらはスプライトで動作し、代わりに要素の画像の背景を変更する必要があります。
ユーザーがマウスを要素の外に移動したときにアニメーションを停止する方法が見つからないため、Javascript の set-interval 関数を使用するのは悪い解決策のようです。