Javascript 内容滑块在手风琴中停止和开始

下面是我创建的手风琴中纯CSS内容滑块的代码。手风琴打开和关闭时，是否可以启动和停止内容滑块？当前，即使手风琴关闭，内容滑块也会保持运行。这在纯CSS中是可能的吗？如果不是，那么使用香草JavaScript（无JQuery）就可以实现这一点。任何有帮助的，干杯

.wrapper{
最大宽度：960像素；
保证金：0自动；
}
/*订单样式*/
.标签{
位置：相对位置；
边缘底部：1px；
宽度：100%；
溢出：隐藏；
}
.bold{
字体大小：粗体；
颜色：#005bab；
}
.顶{
利润上限：-20px；
文本对齐：居中；
字体大小：13px；
}
.输入{
位置：绝对位置；
不透明度：0；
z指数：-1；
}
.标签{
位置：相对位置；
文本对齐：居中；
显示：块；
填充：0.1em；
颜色：#005bab；
背景：#e2ecf6；
字体大小：14px；
字体系列：Verdana；
字体大小：粗体；
线高：6；
光标：指针；
}
.标签：悬停{
背景色：#d2e2ef；
}
.选项卡内容{
最大高度：0；
溢出：隐藏；
填充：0px；
-webkit过渡：最大高度.5s；
-o型过渡：最大高度5秒；
过渡：最大高度.5s；
左侧填充：35px；
背景：#dce7f2；
}
.tab内容.容器{
填充：1em；
保证金：0；
不透明度：0；
变换：比例（0.75）；
-webkit转换：转换0.75s，不透明度0.75s；
-o过渡：变换0.75s，不透明度0.75s；
变换：变换0.75s，不透明度0.75s；
背景:#f4f8fc；
}
/*：选中*/
.input:选中~.选项卡内容{
最大高度：35em；
}
.input:选中~.tab内容.容器{
变换：比例（1）；
不透明度：1；
}
/*图标*/
.标签：：之后{
位置：绝对位置；
左：0；
排名：0；
显示：块；
宽度：3em；
高度：3em；
线高：3；
文本对齐：居中；
-webkit转换：全部.35秒；
-o-过渡：均为0.35s；
过渡：全部.35s；
}
.input[类型=复选框]+.label:：after{
内容：“+”；
}
.input[type=radio]+.label:：after{
内容：“；
}
.input[类型=复选框]：选中+.label:：after{
变换：旋转（315度）；
}
.input[类型=收音机]：选中+.label:：之后{
变换：rotateX（180度）；
}
.底线{
内容：“；
显示：块；
高度：1米；
宽度：100%；
背景色：#00688B；
}
/*所有位置：绝对移除*/
#卷轴{
溢出：隐藏；
}
#滚动条。内部滚动区域{
}
#卷轴{
填充：0；
位置：相对位置；
显示：flex；/*更新*/
}
#卷轴李{
填充：0；
列表样式类型：无；
}
.圆圈{
宽度：130px；
高度：130像素；
位置：相对位置；
保证金：自动；
左：0；
右：0；
排名：0；
底部：0；
边界半径：50%；
背景色：透明；
边框样式：实心；
边框宽度：5px；
边框颜色：#006850；
}
.圈出文本{
颜色：#1f497d；
字体系列：Verdana；
字体大小：12px；
文本对齐：居中；
宽度：200px；
顶部：45px；
左边距：-35px；
底部：0；
位置：绝对位置；
z指数：99；
}
.circleinv{
宽度：130px；
高度：130像素；
位置：相对位置；
保证金：自动；
左：0；
右：0；
排名：0；
底部：0；
边界半径：50%；
背景色：透明；
边框样式：实心；
边框宽度：5px；
边框颜色：透明；
}
.阿罗{
宽度：145px；
高度：45px；
}
阿罗维夫先生{
可见性：隐藏；
宽度：145px；
高度：50px；
}
.flipimage{
宽度：145px；
高度：45px；
-moz变换：scaleY（-1）；
-webkit转换：scaleY（-1）；
-o变换：scaleY（-1）；
变换：scaleY（-1）；
-ms过滤器：fliph；/*IE*/
过滤器：fliph；/*IE*/
}
/*动画更新*/
.ul{
动画：Slideli 90年代无限线性；
}
.ul:悬停{
动画播放状态：暂停；
}
@关键帧滑动{
100% {
transform:translatex（-733.5%）；/*这是对内容的更新，以查看每一个元素幻灯片，直到复制/克隆在同一位置返回*/
}
}

单击“+”展开，单击“x”折叠

内容滑块




人力资源连接
服务
代表


员工关系专家




员工关系经理


董事、员工关系和福利








人力资源连接
服务
代表


员工关系专家




员工关系经理


董事、员工关系和福利








人力资源连接
服务
代表


员工关系
.ul:hover {
  animation-play-state:paused;
}

.input:checked~.tab-content .container .ul:hover {
  animation-play-state:paused;
}

.tab-content .container .ul{
  animation-play-state:paused;
}
.input:checked~.tab-content .container .ul {
  animation-play-state:running;
}