Javascript 如何在单击时启动动画

我的页面上有一个按钮，标签是“黑暗主题”。我想让这个按钮改变背景的效果。当你点击它时，我希望它有彩虹效果，当你再次点击它时，我希望它回到黑暗主题。我已附上相关代码：

正文{
边际：0px；
填充：0px；
溢出y：滚动；
字体系列：Helvetica；
字号：18px；
背景色：#bdbd；
背景色：#45CEEF；
-webkit动画：脉冲1s无限交替；
}
h3{
字体大小：粗体；
文字装饰：下划线；
}
氢{
字体大小：粗体；
文字装饰：下划线；
}
/*电灯开关*/
标签{
显示：块；
高度：25px；
宽度：100px；
背景：白色；
文本对齐：居中；
字体：14px/25px Helvetica，Arial，无衬线；
利润率：20px0；
位置：绝对位置；
颜色：黑色；
过渡：背景0.2s缓变，颜色0.2s缓变；
}
标签：悬停{
背景色：#099；
颜色：白色；
光标：指针；
过渡：背景色0.1s缓进，颜色0.1s缓进；
}
输入#灯开关{
位置：固定；
顶部：-9999px；
左：-9999px；
}
输入#lightswitch+.内容{
颜色：黑色；
过渡：背景色0.5s缓和，颜色0.5s缓和；
}
/*关掉*/
输入#灯开关：选中+.内容{
背景色：#222；
颜色：#D3；
过渡：背景色0.5s缓入，颜色0.5s缓入；
}
@-webkit关键帧脉冲{
0% {
背景色：#45CEEF；
}
25% {
背景色：#FFF5A5；
}
50% {
背景色：#FFD4DA；
}
75% {
背景色：#99D2E4；
}
100% {
背景色：#D8CAB4；
}
}

黑暗主题

单击按钮时，使用Javascript向要设置动画的元素添加CSS类。在样式表中，将动画附加到该特定类

CSS:

JS:

如果使用复选框作为切换，请使用

change

事件：

$(function() {
  $('input#lightswitch').on('change', function() {
    $('.body').toggleClass('animated');
  });
});

---

请在问题中直接输入相关代码。动画与webkit配合使用，因此不会在Firefox上显示

$(function() {
  $('button').on('click', function() {
    $('.body').addClass('animated');
  });
});

$(function() {
  $('input#lightswitch').on('change', function() {
    $('.body').toggleClass('animated');
  });
});