Javascript 需要css切换帮助吗

我想用css做一个切换。开关的左侧会显示颜色，右侧会显示B&W。我所需要的是一个简单的动画，它涵盖了单击开关时使用的选项。我在codepen上寻找了一些例子，但是所有的东西都是使用SASS或其他不同类型的代码，我真的不知道如何在我自己的代码中编辑或实现这些代码。

有一个很好的库，您可以使用它

/*============================================================
普通的
============================================================ */
#包装纸{
最小宽度：600px；
}
.设置{
显示：表格；
宽度：100%；
}
.设置.行{
显示：表格行；
}
.设置.问题:，
.设置.开关{
显示：表格单元格；
垂直对齐：中间对齐；
填充：10px；
}
.设置.问题{
宽度：600px；
字体系列：“Roboto Slab”，衬线；
字体大小：20px；
}
/* ============================================================
普通的
============================================================ */
.cmn开关{
位置：绝对位置；
左边距：-9999px；
可见性：隐藏；
}
.cmn切换+标签{
显示：块；
位置：相对位置；
光标：指针；
大纲：无；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
/* ============================================================
开关1-轮
============================================================ */
input.cmn-toggle-round+标签{
填充：2px；
宽度：120px；
高度：60px；
背景色：#dddddd；
-webkit边界半径：60px；
-moz边界半径：60px；
-ms边界半径：60px；
-o-边界半径：60px；
边界半径：60px；
}
input.cmn-toggle-round+标签：在，
input.cmn-toggle-round+标签：之后{
显示：块；
位置：绝对位置；
顶部：1px；
左：1px；
底部：1px；
内容：“；
}
input.cmn-toggle-round+标签：之前{
右：1px；
背景色：#f1f1；
-webkit边界半径：60px；
-moz边界半径：60px；
-ms边界半径：60px；
-o-边界半径：60px；
边界半径：60px；
-webkit转换：后台0.4s；
-moz转换：背景0.4s；
-o-过渡：背景0.4s；
过渡：背景0.4s；
}
input.cmn-toggle-round+标签：之后{
宽度：58px；
背景色：#fff；
-webkit边界半径：100%；
-moz边界半径：100%；
-ms边界半径：100%；
-o-边界半径：100%；
边界半径：100%；
-webkit盒阴影：0 2px 5px rgba（0,0,0,0.3）；
-moz盒阴影：0 2px 5px rgba（0,0,0,0.3）；
盒影：0 2px 5px rgba（0,0,0,0.3）；
-webkit过渡：利润率0.4s；
-moz过渡：裕度0.4s；
-o-过渡：裕度0.4s；
过渡期：利润率0.4s；
}
input.cmn切换圆：选中+标签：之前{
背景色：#8ce196；
}
input.cmn切换圆：选中+标签：之后{
左边距：60像素；
}
/* ============================================================
开关2-圆形平面
============================================================ */
input.cmn-toggle-round-flat+标签{
填充：2px；
宽度：120px；
高度：60px；
背景色：#dddddd；
-webkit边界半径：60px；
-moz边界半径：60px；
-ms边界半径：60px；
-o-边界半径：60px；
边界半径：60px；
-webkit转换：后台0.4s；
-moz转换：背景0.4s；
-o-过渡：背景0.4s；
过渡：背景0.4s；
}
input.cmn-toggle-round-flat+标签：之前，
input.cmn-toggle-round-flat+标签：之后{
显示：块；
位置：绝对位置；
内容：“；
}
input.cmn-toggle-round-flat+标签：之前{
顶部：2个；
左：2px；
底部：2px；
右：2px；
背景色：#fff；
-webkit边界半径：60px；
-moz边界半径：60px；
-ms边界半径：60px；
-o-边界半径：60px；
边界半径：60px；
-webkit转换：后台0.4s；
-moz转换：背景0.4s；
-o-过渡：背景0.4s；
过渡：背景0.4s；
}
input.cmn-toggle-round-flat+标签：之后{
顶部：4px；
左：4px；
底部：4px；
宽度：52px；
背景色：#dddddd；
-webkit边界半径：52px；
-moz边界半径：52px；
-ms边界半径：52px；
-o-边界半径：52px；
边界半径：52px；
-webkit过渡：边距0.4s，背景0.4s；
-moz过渡：边距0.4s，背景0.4s；
-o-过渡：边缘0.4s，背景0.4s；
过渡：边距0.4s，背景0.4s；
}
输入.cmn切换圆形平面：选中+标签{
背景色：#8ce196；
}
input.cmn切换圆形展开：选中+标签：之后{
左边距：60像素；
背景色：#8ce196；
}
/* ============================================================
开关3-是或否
============================================================ */
input.cmn-toggle-yes-no+标签{
填充：2px；
宽度：120px；
高度：60px；
}
input.cmn-toggle-yes-no+标签：在，
input.cmn-toggle-yes-no+标签：之后{
显示：块；
位置：绝对位置；
排名：0；
左：0；
底部：0；
右：0；
颜色：#fff；
字体系列：“Roboto Slab”，衬线；
字体大小：20px；
文本对齐：居中；
线高：60px；
}
input.cmn-toggle-yes-no+标签：之前{
背景色：#dddddd；
内容：attr（数据关闭）；
-webkit转换：-webkit转换0.5s；
-moz变换：-moz变换0.5s；
-o-转变：-o-转变0.5s；
转变：转变0.5s；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-ms背面可见性：隐藏；
-o-背面-可见性：隐藏；
背面可见性：隐藏；
}
input.cmn-toggle-yes-no+标签：之后{
背景色：#8ce196；
内容：attr（有关的数据）；
-webkit转换：-webkit转换0.5s；
-moz变换：-moz变换0.5s；
-o-转变：-o-转变0.5s；
转变：转变0.5s；
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-ms变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
function Showelement(id,n1){

    document.getElementById(id).style.display = "inline";
    document.getElementById(n1).style.display = "";

}