如何为多个背景的背景大小设置动画答案

【问题标题】：How to animate background-size of multiple background如何为多个背景的背景大小设置动画
【发布时间】：2017-08-25 07:24:42
【问题描述】：

我根本无法为background-size 属性设置动画。

<div class="bar">
    <div class="intern-bar">
        R$ <span id="funds">000,00</span>
   </div>
</div>

JS（使用 jQuery）：

$(".intern-bar").animate({backgroundSize: "100% 100%, 100%"}, function(){
    console.log("done")
});

CSS（SCSS）：

body {
  background-color: black;
     }
.bar {
    border-radius: 100px;
    background-color: #ffffff;
    padding: 7px;
    box-sizing: border-box;
    .intern-bar {
        padding: 6px 15px;
        box-sizing: border-box;
        border-radius: 100px;
        background: linear-gradient(to right, #00C1EB, #00c1eb) 
        no-repeat, linear-gradient(to right, rgba(182, 182, 182, 
        0.54), rgba(121, 121, 121, 0.40)) no-repeat;
        background-size: 56% 100%, 100%;
        background-position: 0%, 10%;
        height: 100%;
        min-width: 155px;
        width: 100%;
        font-size: 30px;
        text-align: center;
        font-weight: 200;
        line-height: 1;
        transition: 0.8s ease;
        #funds {
            font-weight: 500;
            }
        }
    }

我偶然发现了这个答案：

因为 background-size 是 jQuery 尚不支持的 CSS3 属性，因为它仍然是推荐的候选对象。

来自这个问题：jQuery - Animate css background-size? 而且我遇到的所有答案都没有为我工作，我需要使用 animate 的回调函数，在它完成后做一些事情，比如五彩纸屑动画等
笔：https://codepen.io/Malganis/pen/MvXLxY

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

这是我的工作jsFiddle，我使用了CSS animations。

我刚刚修改了你的CSS 和JQUERY :) 希望这可以帮助你。

【讨论】：

Ty，但是.addClass()方法中动画完成时没有回调，所以我不能选择这个方案。
我已添加警报
和动画时间对应的setTimeout函数

【解决方案2】：

解决方案：

(jQuery) 将一个或多个事件的事件处理函数附加到选定的元素。
```
$(element).on();
```

（标准 JS）transitionend 事件在 CSS 转换完成时发生

element.addEventListener("transitionend", function () {
  console.log("Done");
}, false);

jsFiddle

【讨论】：