【发布时间】：2021-01-03 17:28:52
【问题描述】：
我有以下设置，其中多个对象以交错的延迟缩小。我面临以下问题：
- 缩小动画设置为从 0% 加速到 15%，然后减慢其余关键帧的速度。但是当动画从 15% 过渡到 16% 时，动作明显不和谐。我怎样才能使这个过渡顺利？
- 当圆圈开始时，它们从左侧出现，而不是以它们的原点为中心。我该如何解决这个问题？
HTML：
<div>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle class="blk" cx="10" cy="10" r="5"/>
<circle class="red" cx="20" cy="10" r="5" color="red" stroke="red" fill="red"/>
<circle class="green" cx="30" cy="20" r="5" color="red" stroke="green" fill="green"/>
</svg>
</div>
CSS：
.blk{
animation-name: zoom-out;
animation-duration: 2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-delay: 2.5s;
}
.red{
animation-name: zoom-out;
animation-duration: 2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-delay: 1.5s;
}
.green{
animation-name: zoom-out;
animation-duration: 2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-delay: 0.5s;
}
@keyframes zoom-out {
0% {
transform: scale(5,5);
}
15% {
transform: scale(2,2);
}
100% {
transform: scale(1,1);
}
}
【问题讨论】：