自定义：从Javascript悬停动画

Question

我正在使用包含spritesheet动画的数据填充元素。这个动画有自定义尺寸所以我真的不能使用任何静态CSS。使用css3我设法定义了这样的关键帧：

@-webkit-keyframes play {
    from { background-position: 0px; }
    to { background-position: calc(-100% + 32px + 1px); }
}

现在我只想像这样悬停播放动画

.emoticon:hover {
    -webkit-animation: play 1000ms steps(10) infinite;
}

但这仅在spritesheet有10帧时有效。如果不创建100个不同的类，这样做的好方法是什么？