我创建了这个动画，但它并不流畅。当您将鼠标悬停在蓝色圆圈上时，会打开一个彩色圆圈，但开口不稳定，不是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>
答案 0 :(得分：3)
原因：（没有链接/来源备份，这只是一个有根据的猜测）
我在过去遇到过类似的情况，我设法发现的是由于（我相信）子像素渲染问题而发生抖动。
当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