Question

假设我的动画从0％{左：0％;下：0％;}到100％{左：100％; bottom：0％;}并将animation-iteration-count设置为无限。

现在当动画转移到终点（100％）时，它会再次从开始点（0％）开始。现在我想要的是动画再次开始并且它应该减小元素的大小，假设默认大小为200 pixels width and 200 pixels height，因此减少的值等于减去10像素，当动画元素变为0像素宽度和高度时，它应该再次增加该元素的大小，以便增加值等于加10像素。

这是demo而不增加和减少元素。

Answer 1

这可以清理，但基本上你可以听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);
    } 
});

<强> DEMO

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

http://www.sitepoint.com/css3-animation-javascript-event-handlers/

Answer 2

如果您的浏览器支持动画中的steps（）和多个动画，那么您可以使用仅限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;
}

我让它变慢了，以便您可以看到尺寸变化是一步一步完成的，而不是连续的

updated fiddle

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

2 个答案: