Angular4で画像移動を止める

Angular4にて画像をX軸上に移動するようにしてみました。

ボタンを押したら、一時停止や、逆に動くようにしてみたいと思うのですが、
どのようにスタイルを切り替えていいのかがわかりません…。
なにかアドバイスをいただけると助かります。

◆CSS

.wrap {
  overflow: hidden;
}     

.sliding {
  background: url('../assets/test.png') repeat-x;
  height: 500px;
  width: 3384px;
  animation: slide 60s linear infinite;
}

@keyframes slide{
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-1692px, 0, 0);
  }
}

◆HTML

<div class="wrap">
    <div class="sliding">
</div>