Javascript 如何使用css和js为这个html代码提供动画？

在这段代码中，我试图为这根蜡烛添加一些动画。我不太熟悉使用js和css的动画，这就是我发布这个问题的原因。我的疑问是我们如何限制特定事件的时间。在这段代码中，我想将火焰向左和向右移动一点，连续向上移动，以按下停止键。如果我给一些css属性，它可能会工作一段时间，但我想继续动画，直到单击第二个按钮。是否可以不加载任何外部库？如果是，怎么做

函数fire（）
{
document.getElementById（“蜡烛火焰”）.className=“img火焰”；
document.getElementById（“candle”）.className=“img candle”；
}
函数停止（）{
document.getElementById（“蜡烛火焰”）.className=“单击前的img火焰”；
document.getElementById（“蜡烛”）.className=“单击蜡烛前的img蜡烛”
}

.candle容器{
浮动：左；
利润率最高：2%；
宽度：50%；
身高：40%；
利润底部：10%；
}
.蜡烛火焰{
左边距：10%；
}
坎德尔先生{
左缘：91%；
}
.img蜡烛{
/*位置：绝对位置*/
身高：100%；
宽度：292%；
/*z指数：9*/
溢出：无；
}
.点蜡烛前{
利润率最高：185%；
}
.img火焰{
/*位置：绝对位置*/
左缘：20%；
/*z指数：10*/
左缘：103.5%；
利润底部：-4%；
宽度：4%；
身高：33%；
}
。点击前{
显示：无；
}
/*.点击后{
显示：块；
}*/
.消防箱{
浮动：左；
边框样式：凹槽；
边框颜色：黑色；
边框宽度：中等；
宽度：32%；
身高：14%；
利润率最高：6%；
左缘：27%；
垫面：5%；
左：22%；
}

火
停止射击

我想你需要这个..检查这个我想你需要这个..检查这个