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

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

原因：（没有links/source备份，这只是一个有根据的猜测）

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

当 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%) 意味着没有。用于转换元素的 px 有时是分数，似乎在实际转换期间会发生一些更正以克服这些小数值。

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

而不是使用 translate(-50%, -50%) 技巧进行水平 + 垂直居中，如果我们通过提供 top 和 left 以像素为单位直接定位元素，您会看到有没有动摇。根据我的理解，这是因为浏览器逐个像素地转换所有 4 个属性（height、width、top 和 left），因此没有分数值导致更正。

(测试最新 Chrome + Windows 10.)

#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;
}

<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>

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

How to smoothen transition of width and height?

html

css

css-transitions

css-transforms