使用input:checked触发CSS关键帧动画失效求助

我确信这个功能本应正常运行，肯定是漏了某个明显的细节。我做了个复选框toggle，想在它被选中时触发3个用animation-delay实现的交错动画（类似汉堡按钮展开菜单的顺序效果），打算只用CSS完成。

当前代码在不涉及toggle时完全正常，试过用.CT007toggle:checked + .songContainer这类相邻兄弟选择器，问题依旧。

现有CSS代码 #

.CT007Content {
  display:flex;
  flex-direction: row-reverse;
  height:0;
  overflow:hidden;
}
@keyframes open-CT007 {
  from{height:0;}
  to{height:auto}
}

.songContainer{
  display:flex;
  flex:1;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
  height:0;
  overflow:hidden;
}

@keyframes CT007-dropdown {
  from{height:0}
  to{height:auto; overflow:visible;  padding-top:10%;}
}

.artworkContainer {
  display:flex;
  flex:2;
  transform: translateX(150%);
  background-color: white;
  min-height:50vw;
  max-height:60vw;
  width:auto;
  z-index:1;
}

@keyframes CT007-pullover {
  from{transform: translate3d(100%,0,0);}
  to{transform: translate3d(0,0,0);}
}

.CT007toggle:checked ~ .songContainer{
  animation: CT007-dropdown 1s linear forwards;
  animation-delay:0.5s;
}

.CT007toggle:checked ~ .CT007Content{
animation: open-CT007 1s linear forwards;
  animation-delay:0.2s;
}

.CT007toggle:checked ~ .artworkContainer{
animation: CT007-pullover 1s linear forwards;
animation-delay:2s;
}

现有HTML代码 #

<div className={styles.Release}>
            <h2 className={styles.releaseTitle}>CT007
            
                <input className={styles.CT007toggle} type="checkbox"/>
                <label htmlFor={styles.CT007toggle}></label>
            </h2>
            <content className={styles.CT007Content}>
                <div className={styles.songContainer}>
                    <div className={styles.trackContainer} onClick={changeStyle}>
                        <audio controls className={style} src="/TEX86.mp3">
                            {/* <source src="/TEX86.mp3" type = "audio/mpeg"/> */}
                        </audio>
                        
                        <div className={styles.trackText}>
                            <h4>You'll Never Get Rich</h4>
                        </div>
                        
                    </div>
                    <div className={styles.trackContainer}>
                        <audio controls className={style}>
                            <source src="" type = "audio/mpeg"/>
                        </audio>
                        <div className={styles.trackText}>
                                <h4>Death by Dole</h4>
                        </div>
                    </div>
                </div>
                <div className={styles.artworkContainer}>
                    <svg  src=""/>
                </div>
           <content/>
    </div>

核心问题点 #

1. 选择器层级错误：.CT007toggle嵌套在<h2>标签内，而目标元素.CT007Content、.songContainer是<h2>的同级元素，CSS的兄弟选择器(~/+)只能选择同级的后续元素，因此当前选择器无法关联到目标元素。
2. height:auto动画失效：CSS动画不支持height:0到height:auto的过渡，因为auto是不确定的高度值，浏览器无法计算中间帧。
3. HTML标签错误：<content>不是标准HTML标签，且闭合标签写法错误（应为</content>而非<content/>）。

修正后的代码 #

调整后的HTML结构

<div className={styles.Release}>
    <h2 className={styles.releaseTitle}>CT007</h2>
    <!-- 将toggle移到h2外，与CT007Content同级 -->
    <input className={styles.CT007toggle} type="checkbox" id={styles.CT007toggle}/>
    <label htmlFor={styles.CT007toggle}></label>
    <!-- 替换为标准div标签 -->
    <div className={styles.CT007Content}>
        <div className={styles.songContainer}>
            <div className={styles.trackContainer} onClick={changeStyle}>
                <audio controls className={style} src="/TEX86.mp3"></audio>
                <div className={styles.trackText}>
                    <h4>You'll Never Get Rich</h4>
                </div>
            </div>
            <div className={styles.trackContainer}>
                <audio controls className={style}>
                    <source src="" type="audio/mpeg"/>
                </audio>
                <div className={styles.trackText}>
                    <h4>Death by Dole</h4>
                </div>
            </div>
        </div>
        <div className={styles.artworkContainer}>
            <svg src=""/>
        </div>
    </div>
</div>

修正后的CSS代码

.CT007Content {
  display:flex;
  flex-direction: row-reverse;
  max-height:0; /* 用max-height替代height */
  overflow:hidden;
}
/* 调整动画目标为max-height，设置足够大的终点值覆盖内容高度 */
@keyframes open-CT007 {
  from{max-height:0;}
  to{max-height:1000px;}
}

.songContainer{
  display:flex;
  flex:1;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center; /* 修正align-content为align-items，flex布局中垂直对齐用这个 */
  max-height:0;
  overflow:hidden;
}

@keyframes CT007-dropdown {
  from{max-height:0}
  to{max-height:800px; padding-top:10%;}
}

.artworkContainer {
  display:flex;
  flex:2;
  transform: translateX(150%);
  background-color: white;
  min-height:50vw;
  max-height:60vw;
  width:auto;
  z-index:1;
}

@keyframes CT007-pullover {
  from{transform: translate3d(100%,0,0);}
  to{transform: translate3d(0,0,0);}
}

/* 先选中同级的CT007Content，再嵌套选择内部元素 */
.CT007toggle:checked ~ .CT007Content{
  animation: open-CT007 1s linear forwards;
  animation-delay:0.2s;
}

.CT007toggle:checked ~ .CT007Content .songContainer{
  animation: CT007-dropdown 1s linear forwards;
  animation-delay:0.5s;
}

.CT007toggle:checked ~ .CT007Content .artworkContainer{
  animation: CT007-pullover 1s linear forwards;
  animation-delay:2s;
}

关键修正说明 #

• 调整HTML结构，让toggle与.CT007Content同级，确保兄弟选择器能正确关联。
• 用max-height替代height:auto实现展开动画，设置足够大的终点值来覆盖内容实际高度。
• 修正选择器路径，通过.CT007Content容器嵌套选择内部的.songContainer和.artworkContainer，确保toggle状态能正确触发动画。
• 替换非标准<content>标签为<div>，修复标签闭合错误。

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