react项目中播放音频时扬声器图标动画效果

今天在做react项目时，一个小的功能需求：点击播放音频时扬声器图标要实现动画效果。

起初我做出来的效果是第一次点击播放音频时，音频图标会有动画效果，但继续点击动画效果却没有了。
后面我的做法如下：
ic_sound_grey.png

下面是部分代码：

.loudspeaker{
        display: inline-block;
        width: px2rem(18);
        height: px2rem(17);
        vertical-align: middle;
        background: url("../images/ic_sound_grey.png") no-repeat;
        background-size:px2rem(18);
        background-position: 0 0;
      }
.loudspeaker_animation{
        animation: voice_play 1s infinite step-start;
      }
@keyframes voice_play{
        0%{
          background-position: 0 0;
        }
        33.333%{
          background-position: 0 px2rem(-34);
        }
        66.666%{
          background-position: 0 px2rem(-17);
        }
        100%{
          background-position: 0 0;
        }
      }

 readAudio() {
        this.audioRef.current.src = this.state.enVal.phEnMp3
        this.audioRef.current.play();
        this.setState({
            isicon: true
        })	
 }

最后的效果：

background-position还需进一步调整。