使用CSS动画选择同级元素时滑入框

首先，我知道如何使用JQuery实现这一点。现在，这是不可能的，让我解释一下。我所做的只是一个简单的CSS知识练习。我想做的是用尽可能少的javascript使用CSS完成所有操作，即使这会使工作变得更困难。我正试图使它，以便当你点击并按住标题，第一次出现，幻灯片框将滑入。我已确保动画在加载时正常工作。我确信这与我正在使用的选择器有关

。淡入：激活~。侧框

其中包括整个自编（我猜是自作自受）练习。不，这不是家庭作业。这是因为我在工作中感到无聊，实际上我觉得这种事情很有趣

正文{
背景色：#000000；
颜色：#ccc；
字体系列：verdana；
}
.淡入{
位置：相对位置；
动画：fadein 0.5s向前移动0s 1；
}
。淡入：激活{
动画：向右滑动0.5秒，向前移动0.1秒；
}
.淡入：：选择{
背景：无；
}
.淡入：激活~.侧框{
动画：slideright 0.5s向前移动0s 1；
}
.侧箱{
背景色：#35587d；
宽度：300px；
高度：100vh；
位置：绝对位置；
左：-300px；
}
.侧箱{
颜色：#fff；
}
@关键帧淡入淡出{
0% {
位置：绝对位置；
顶部：-10px；
不透明度：0；
}
100% {
位置：绝对位置；
排名：0；
不透明度：1；
变换：translateX（0）；
}
}
@关键帧幻灯片灯光{
0% {
位置：绝对位置；
左：-300px；
}
100% {
位置：绝对位置；
左：0；
}
}
@关键帧向右滑动{
0% {
位置：绝对位置；
左：0；
}
100% {
位置：绝对位置；
转换：translateX（300px）；
}
}

欢迎
你好

选择dom中跟随的一般兄弟姐妹

请参阅下面更新的代码段

正文{
背景色：#000000；
颜色：#ccc；
字体系列：verdana；
}
.淡入{
位置：相对位置；
动画：fadein 0.5s向前移动0s 1；
}
。淡入：激活{
动画：向右滑动0.5秒，向前移动0.1秒；
}
.淡入：：选择{
背景：无；
}
.淡入：激活~.侧框{
动画：slideright 0.5s向前移动0s 1；
}
.侧箱{
背景色：#35587d；
宽度：300px；
高度：100vh；
位置：绝对位置；
左：-300px；
}
.侧箱{
颜色：#fff；
}
@关键帧淡入淡出{
0% {
位置：绝对位置；
顶部：-10px；
不透明度：0；
}
100% {
位置：绝对位置；
排名：0；
不透明度：1；
变换：translateX（0）；
}
}
@关键帧幻灯片灯光{
0% {
位置：绝对位置；
左：-300px；
}
100% {
位置：绝对位置；
左：0；
}
}
@关键帧向右滑动{
0% {
位置：绝对位置；
左：0；
}
100% {
位置：绝对位置；
转换：translateX（300px）；
}
}

你好
欢迎

我花了一秒钟看了看你做了什么改变，但我明白了。为了向其他人澄清，将h1切换到受影响的DIV之前有助于改变这种情况。