14

このような CSS キーフレーム アニメーションがある場合

@keyframes flash-red {
  50% {
    background: #f00;
  }
}

#goflash.anm-flash {
  animation-name: flash-red;
  animation-duration: .5s;
  background: rgba(255, 0, 0, 0);
}

次に、次のようにいつでもアニメーションをトリガーできます。

var gf = document.querySelector("#goflash");
gf.classList.remove("anm-flash");
setTimeout(function() {
  gf.classList.add("anm-flash");
}, 50);

animation-duration/animation-timing-function を JavaScript に依存するようにオーバーライドする方法はありますか? gf.animate("flash-red", "50%")背景をgf赤にするとか、gf.animate("flash-red", "75%")背景をもっとrgba(255, 0, 0, .5).

理想的には、同じ手法がトランジションにも機能します。gf.transitionTo("new-class", "50%")途中で遷移した要素を表示します。

明らかに、これflash-redは単なる例です。どのアニメーションでもこれを実行できるようにしたいと考えています。

4

5 に答える 5

4

element にアニメーションが 1 つしかない場合、 andgfで簡単に制御できます。animation-delayanimation-play-state

gf.__proto__.animate = function(percent) {
  this.style["animation-play-state"] = "paused";
  this.style["animation-delay"] = (
    (parseFloat(this.style["animation-duration"] || 1) * -percent) + "s"
  );
};

次のように計算されたスタイルを取得できます。

window.getComputedStyle(gf).background

任意の速度でステップスルーするには:

(function animation(time) {
  gf.animate( ((time || 0) % desireSpeed ) / desireSpeed );
  requestAnimationFrame(animation);
})();

注: これは css からの animation-delay をオーバーライドするため、おそらく vairable に保持し、オフセットとして に追加することをお勧めしますgf.__proto__.animate()。

于 2017-08-23T04:30:23.867 に答える
3

あなたが望むようにそれを行うことはできません。

あなたの唯一の可能性は、与えられた遅延の後に再生状態を変更することです.

あなたの場合、アニメーションは 0.5 秒続くため、アニメーションを 50% にするには、タイムアウトを 0.25 秒に設定してから、 animation-play-state : paused を設定する必要があります。

もちろん、正確に 50% というわけではありません。この方法の精度を信用しないでください。

編集

Webkit のデモを追加:

フィドル

HTMLは簡単です

<div id="goflash">TEST</div>
<input type="button" value="animate" onclick="animate()">

そしてCSSは簡単です

#goflash {
    width: 200px;
    height: 200px;
    left: 35px;
    top: 35px;
    position: absolute;
    background-color: red;
}
.anm-flash {
    -webkit-animation-name: flash;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes flash {
    from {   -webkit-transform: rotate(0deg);
             background-color: red;        }
    50% {    -webkit-transform: rotate(120deg);
             background-color: yellow;}
    to {    -webkit-transform: rotate(360deg);
            background-color: red;
    }
}

そして、JavaScriptはあなたが提供したものからの拡張です：

function animate () {
    var gf = document.querySelector("#goflash");
    gf.classList.remove("anm-flash");
    setTimeout(function() {
        gf.classList.add("anm-flash");
        gf.style.webkitAnimationPlayState = "running";
    }, 50);
    setTimeout(function() {
        gf.style.webkitAnimationPlayState = "paused";
    }, 2550);
}

クラスをリセットし、少し一時停止してアニメーションを開始し、開始後に計算された遅延が発生したら、それを停止します。アニメーション時間は 5 秒で、最初の遅延は 50 ミリ秒だったので、2 番目の遅延は (5000/2) + 50 でなければなりません。再生状態を一時停止に設定したので、アニメーションを再実行することができなくなります。状態を再度実行中に設定します。

于 2013-06-20T20:00:00.383 に答える
1

おそらく、CSS DOM を使用してアニメーションの意図を解析し (それが可能な場合でも?)、JavaScript ですべてを再構築します。

しかし、それは並外れた偉業ではありません。

CSS プリプロセッサがこのようなコードの構築に役立つかどうか疑問に思います。これはすべて理論上です。

于 2013-06-24T16:44:19.620 に答える
0

はい、アニメーションの期間またはタイミングをオーバーライドできます。あなたが何をしたいのか理解できたと思います：

http://jsfiddle.net/SEHyW/

var gf = document.querySelector("#goflash"),
    animationDuration = '1s'

gf.classList.remove("anm-flash");
setTimeout(function() {
  gf.classList.add("anm-flash");
  gf.style["-webkit-animation-duration"] = animationDuration;
}, 1000);
于 2013-06-29T19:32:52.113 に答える