複数の背景の背景サイズをアニメーション化する方法

Question

background-sizeプロパティをアニメーション化することはできません。 （jQueryを使って）

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

JS：

$(".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; 
      } 
     } 
    } 

私はこの答えつまずくました：

を背景サイズのため、まだ勧告の候補者であるため、jQueryでサポートされていないCSS3のプロパティです。 jQuery - Animate css background-size? そして、私は全体来ている答えのどれもが私のために働いた、と私は紙吹雪のように、それが終了しています時に何かをする、アニメーションのコールバック関数を使用するが必要：この質問から

アニメーションなど
ペン：https://codepen.io/Malganis/pen/MvXLxY

Answer 1

ここで私はCSS animationsを使用し、私の作業jsFiddleです。

私はあなたのCSSとJQUERY :)を修正しました。これがあなたに役立つことを願っています。

Answer 2

ソリューション：

• （jQueryの）選択 要素に1つまたは複数のイベントのためのイベントハンドラ関数を接続。

  $(element).on(); 
  

• CSSの遷移が

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

  jsFiddle