Question

我根本无法为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

Answer 1

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

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

Answer 2

解决方案：

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

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

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

jsFiddle

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

2 个答案: