Javascript 如何在每次动画迭代计数后更改元素的大小？

假设，我将动画从0%{left:0%；bottom:0%；}设置为100%{left:100%；bottom:0%；}，并将动画迭代计数设置为无限

现在，当动画移动到终点（100%）时，它将再次从起点（0%）开始.现在我想要的是，当动画一次又一次开始时，它应该减小元素的大小，假设默认大小为

200像素宽和200像素高

，因此减小的值等于-10像素，当动画元素的宽度和高度为0像素时，它应该再次增大元素的大小元素，因此增加的值等于+10像素

---

这是在不增加和减少元素的情况下进行的操作。

这可以清除，但本质上您可以收听

animationStart

以捕获元素的初始大小

$("#element").on("webkitAnimationStart", function(e) {
    var el = $(this);

    initialHeight = el.height();
    initialWidth = el.width();
});

…并收听

animationIteration

以在每次迭代后更改元素的大小：

$("#element").on("webkitAnimationIteration", function(e) {
    var el = $(this),
        currentHeight = el.height(),
        currentWidth = el.width(),
        scaleStep = 10;

    if (currentHeight > 0 && currentWidth > 0) {
        el.height(currentHeight - scaleStep);
        el.width(currentWidth - scaleStep);
    }
    else {
        el.height(initialHeight);
        el.width(initialWidth);
    } 
});

请注意，这仅适用于webkit浏览器。要支持其他浏览器，请参阅本文中的浏览器兼容性部分：

---

如果浏览器支持动画中的步骤（）和多个动画，则可以使用仅CSS的解决方案

@keyframes esize
{
0%{left: 0%; bottom: 0%;}
100%{left: 90%; bottom: 0%;}
}
@-webkit-keyframes esize
{
    0%{left: 0%; bottom: 0%;}
  100%{left: 90%; bottom: 0%;}
}
@-webkit-keyframes shrink
{
    0%{width: 200px; height: 200px;}
  100%{width: 0px; height: 0px;}
}
@keyframes shrink
{
    0%{width: 200px; height: 200px;}
  100%{width: 0px; height: 0px;}
}

#element{
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background: #000;
    position: absolute;
    left: 0%;
    bottom: 0%;
    animation: esize 3s infinite, shrink 60s steps(20,end) infinite;
    -webkit-animation: esize 3s infinite, shrink 60s steps(20,end) infinite;
}

我已经让它变慢了，这样你就可以看到尺寸的改变是一步一步地进行的，而不是不断地

---

元素大小已知吗？意思是你知道它的大小在x次迭代后会变成0吗？从200px到190px，180px和170px。。。。最后0像素现在大小应该重新启动200px到190px，，，，在演示中，大小甚至没有减小。您使用的是Chrome还是Safari？