如何通过CSS动画实现按住标题时兄弟盒子滑入效果

嘿，我懂你想要纯CSS实现这个交互的想法——毕竟是CSS练习嘛，能不用JS就不用！既然你说加载时动画运行正常，那@keyframes肯定没问题，问题确实大概率出在触发动画的选择器关联上。

纯CSS里没有原生的“按住”状态，但我们可以用:active伪类（鼠标按下元素时的状态）结合兄弟选择器来实现，要是需要点击后保持滑入状态，还可以用checkbox hack来实现。给你两种适配不同需求的方案：

方案一：按住标题时触发滑入（松开即恢复） #

这种是严格的“按住时触发”，松开鼠标后盒子会自动滑回去：

HTML结构 #

<label class="trigger-title">点击按住我</label>
<div class="slide-box">我是滑入的盒子</div>

CSS代码 #

/* 初始状态：盒子在视口左侧外 */
.slide-box {
  width: 200px;
  height: 100px;
  background: #eee;
  transform: translateX(-100%);
  transition: transform 0.3s ease; /* 用transition实现滑入，也可以替换成@keyframes */
}

/* 核心：标题被按住（:active状态）时，触发盒子滑入 */
.trigger-title:active + .slide-box {
  transform: translateX(0);
  /* 如果用@keyframes的话，替换成：animation: slide-in 0.3s forwards; */
}

/* 给标题加交互提示样式 */
.trigger-title {
  cursor: pointer;
  padding: 10px;
  background: #ccc;
  display: inline-block;
}

/* 如果你想用@keyframes定义动画，先添加这个 */
@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

方案二：点击标题后保持滑入状态（可切换） #

要是你需要点击一次滑入，再点击一次滑出的toggle效果，就用checkbox hack来实现：

HTML结构 #

<!-- 隐藏的checkbox，用来存储点击状态 -->
<input type="checkbox" id="slide-trigger" class="hidden-checkbox">
<!-- 标题作为label，点击时切换checkbox的选中状态 -->
<label for="slide-trigger" class="trigger-title">点击我切换滑入状态</label>
<div class="slide-box">我是滑入的盒子</div>

CSS代码 #

/* 隐藏checkbox，不占用页面空间 */
.hidden-checkbox {
  display: none;
}

.slide-box {
  width: 200px;
  height: 100px;
  background: #eee;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

/* 核心：checkbox被选中时，触发盒子滑入 */
.hidden-checkbox:checked + .trigger-title + .slide-box {
  transform: translateX(0);
}

.trigger-title {
  cursor: pointer;
  padding: 10px;
  background: #ccc;
  display: inline-block;
}

关键选择器说明 #

你之前的问题应该是没有正确用**相邻兄弟选择器（+）或者通用兄弟选择器（~）**来关联标题和滑入盒子。要确保标题和盒子是同级元素，这样才能把标题的交互状态（:active/:checked）传递给盒子，触发动画。

如果你的HTML结构是标题嵌套在盒子的父元素里，那就要改用后代选择器，比如.parent-box:active .slide-box，这种情况盒子可能需要用position: absolute来实现初始的“视口外”状态。你可以根据自己的实际结构调整选择器，核心就是把交互状态和动画状态关联起来~

内容的提问来源于stack exchange，提问作者Tyler Lazenby