直接用details[open] summary::marker配合transform: rotate()可实现箭头旋转动画，但需先清除默认marker并重置content；Firefox不支持该伪元素，须用background-image或伪元素模拟箭头并手动控制旋转。
details标签open状态下箭头旋转动画怎么写
直接用 :open 伪类配合 transform: rotate() 就能实现，但关键在触发时机和过渡控制——浏览器默认箭头是 UA 样式生成的，不能直接选中，必须通过 summary::marker 或替换整个 marker 才能动起来。
为什么直接给 details > summary 加 transition 不生效
因为原生箭头不是 summary 的子元素，也不是背景图，而是浏览器内置的 ::marker（部分浏览器如 Chrome/Edge 支持，Firefox 需要额外处理）。给 summary 加 transform 只会转文字，不会动箭头。
-
summary::marker在 Chrome/Edge 中可被样式化，支持transition和transform - Firefox 目前不支持
summary::marker的旋转，需用background+padding-left模拟箭头并手动控制 - 所有浏览器都支持用
details[open] summary::marker匹配展开态
兼容写法：CSS 控制 marker 旋转（Chrome/Edge 主流方案）
这是最轻量、无需 JS 的方式，适用于现代浏览器：
details summary {
list-style: none;
}
details summary::marker {
content: "▶";
transition: transform 0.2s ease;
}
details[open] summary::marker {
transform: rotate(90deg);
}
注意点：
立即学习“前端免费学习笔记（深入）”；
- 必须先用
list-style: none清掉默认 marker，再用content重置符号，否则部分浏览器会叠加显示 -
rotate(90deg)是向右旋转 90°，变成 ▶ → ▼；若想从 ▼ 开始、展开后变成 ▽，用rotate(180deg) - 动画时长建议 ≤ 0.25s，太慢会感知卡顿，太快则不清晰
Firefox 兼容 fallback：用 background-image 模拟箭头
当需要全浏览器支持时，放弃原生 marker，改用背景图或伪元素：
details summary {
padding-left: 24px;
position: relative;
}
details summary::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 12px;
height: 12px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M8.12 9.29 12 13.17l3.88-3.88L17 10.41l-5 5-5-5z'/%3E%3C/svg%3E") no-repeat center;
transform: translateY(-50%);
transition: transform 0.2s ease;
}
details[open] summary::before {
transform: translateY(-50%) rotate(90deg);
}
这样写的好处：
- 完全可控，不依赖 UA 样式
- SVG 内联避免额外请求，颜色可直接用
fill控制 - 注意
transform: translateY(-50%)要始终存在，否则 rotate 会以左上角为原点偏移
::marker 这一套，得提前准备降级方案。 
