最近几天我一直在摆弄纯CSS手风琴。本质上，我不知道自己在做什么，但是我发现了一些例子，将我推向正确的方向。我现在开始工作了。好吧！
在您进一步阅读之前，我创建了一个codepen。我认为能够检查我正在谈论的代码可能会有所帮助。你知道的，我正在努力帮助你帮助我...
手风琴有一个圆形的SVG元素，我将其包裹在<label>标签中，用于展开和折叠手风琴。点击SVG（或实际上是标签）后，将检查radio输入，然后开始播放transform: rotate(45deg); SVG的动画。它还触发行的扩展。还有一些技巧，涉及到每行中的第二个radio输入，以便能够使用SVG再次折叠该行。
我认为（希望）您刚刚阅读的这些详细信息与我的实际问题无关！但是也许他们是这样，所以我想提供一些背景信息。无论如何，当我在文档中不适当地摆弄它时，它似乎是the effect I want：
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<body>
但是，一旦我添加了这些，动画就发生了变化，现在，除了旋转之外，SVG也略微shifts position（如果我没记错的话，请向右下方）。这就是the effect I don't want！
我看到的是什么效果？是因为实际上是标签的旋转元件不是方形的吗？那么，为什么只有在正确格式化HTML后才发生这种情况？
[重要的是，GIFS记录在Safari中（我也用它来预览代码）。但是codepen也显示shifting。我可能搜索了错误的术语，但似乎找不到答案。
第一建议-别忘了为绝对元素设置x和y位置，这可能会在某些浏览器中引起问题。您的问题出在label（faq-btn）中，因为它是矩形，但是为了获得良好的动画效果，它应该是正方形。
这里是两个类的修复程序：
.faq-row {
position: relative;
line-height: 30px;
font-size: 24px;
font-family: "Source Sans Pro", sans-serif;
font-weight: 700;
margin-bottom: 20px;
}
.faq-btn {
display: flex;
position: absolute;
top: 0;
left: 400px;
transition: all 1s ease-out;
}