如何平滑宽度和高度的过渡？

Question

我创建了这个动画，但它并不流畅。当您将鼠标悬停在蓝色圆圈上时，会打开一个彩色圆圈，但开口不稳定，不是100％平滑。动画可以平滑化吗？

#container {
  border: 1px solid black;
  width: 600px;
  height: 600px;
  position: relative;
}
#circle {
  margin: 0;
  padding: 0;
  border: 1px solid black;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  transition: width 0.2s, height 0.2s;
}
#circle a {
  margin: 0;
  display: block;
  padding: 0;
  width: 250px;
  height: 220px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
}
#circle a:hover {
  opacity: 0.5;
  cursor: pointer;
}
#trap1 {
  background-color: green;
  transform: rotate(0deg) skewX(30deg);
}
#trap2 {
  background-color: yellow;
  transform: rotate(60deg) skewX(30deg);
}
#trap3 {
  background-color: red;
  transform: rotate(120deg) skewX(30deg);
}
#trap4 {
  background-color: blue;
  transform: rotate(180deg) skewX(30deg);
}
#trap5 {
  background-color: orange;
  transform: rotate(240deg) skewX(30deg);
}
#trap6 {
  background-color: purple;
  transform: rotate(300deg) skewX(30deg);
}
#hide {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: cyan;
}
#circle:hover {
  width: 500px;
  height: 500px;
}

<div id="container">
  <div id="circle">
    <div id="hide"></div>
    <a id="trap1"></a>
    <a id="trap2"></a>
    <a id="trap3"></a>
    <a id="trap4"></a>
    <a id="trap5"></a>
    <a id="trap6"></a>
  </div>
</div>

Answer 1

原因：（没有链接/来源备份，这只是一个有根据的猜测）

我在过去遇到过类似的情况，我设法发现的是由于（我相信）子像素渲染问题而发生抖动。

当height和width转换时，元素的更新似乎逐个像素地发生。例如，在下面的代码段中，有两个div元素正在转换height和width（第一个元素比3px增加5s而第二个增加5px由div）。这里要注意的关键是，对于第一个div{ display: inline-block; height: 100px; width: 100px; background: red; border: 1px solid; margin: 10px; transition: all 5s linear; } div:nth-child(1):hover{ height: 103px; width: 103px; } div:nth-child(2):hover{ height: 105px; width: 105px; }，有三个可见步骤，而第二个步骤有五个步骤（意味着它们逐个像素地增加）。

<div></div>
<div></div>

height

现在你会问我这与摇晃有什么联系。连接是width和translate(-50%, -50%)逐像素增加，但translate(-50%, -50%)表示否。用于转换元素的px有时是分数，似乎在实际转换期间发生了一些修正以克服这些小数值。

解决方案：（或解决方法）

不是使用top技巧进行水平+垂直居中，如果我们通过以像素为单位提供left和height来直接定位元素，您会看到没有摇动。根据我的理解，这是因为浏览器会逐个像素地转换所有4个属性（width，top，left和#container { border: 1px solid black; width: 600px; height: 600px; position: relative; } #circle { margin: 0; padding: 0; border: 1px solid black; width: 50px; height: 50px; border-radius: 50%; position: absolute; top: 275px; left: 275px; overflow: hidden; transition: all 0.2s; } #circle a { margin: 0; display: block; padding: 0; width: 250px; height: 220px; position: absolute; top: 50%; left: 50%; transform-origin: 0 0; } #circle a:hover { opacity: 0.5; cursor: pointer; } #trap1 { background-color: green; transform: rotate(0deg) skewX(30deg); } #trap2 { background-color: yellow; transform: rotate(60deg) skewX(30deg); } #trap3 { background-color: red; transform: rotate(120deg) skewX(30deg); } #trap4 { background-color: blue; transform: rotate(180deg) skewX(30deg); } #trap5 { background-color: orange; transform: rotate(240deg) skewX(30deg); } #trap6 { background-color: purple; transform: rotate(300deg) skewX(30deg); } #hide { position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); width: 50px; height: 50px; border-radius: 50%; background-color: cyan; } #circle:hover { width: 500px; height: 500px; left: 50px; top: 50px; }），因此没有导致小数值的原因纠正。

（在最新的Chrome + Windows 10上测试。）

<div id="container">
  <div id="circle">
    <div id="hide"></div>
    <a id="trap1"></a>
    <a id="trap2"></a>
    <a id="trap3"></a>
    <a id="trap4"></a>
    <a id="trap5"></a>
    <a id="trap6"></a>
  </div>
</div>

for i in *.mkv; do
    if [ -f "${i%mkv}"*"srt" ]; then
        ffmpeg -i "$i" -f srt -i "${i%mkv}"*"srt" -map 0:0 -map 0:1 -map 1:0 -c:v copy -c:a copy -c:s srt $i.output.mkv
        mv "${i%mkv}"*"srt" "${i%mkv}srt".old
        mv $i $i.old
        mv $i.output.mkv $i
    else
        echo $i "does not have srt file"
    fi
done