DOM

：

：

Animation コンストラクター

　編集：2022.10.25 by T.A.

[Edge]。→、

新しい Animation オブジェクトのインスタンスを返します。

構文
new Animation([effect[, timeline]])
effect 省略可。アニメーションに割り当てる、AnimationEffect インターフェイスに基づくオブジェクトとして対象となる効果です。

将来的には SequenceEffect や GroupEffect などの他の効果も利用できるようになるかもしれませんが、現在のところ利用できる効果は KeyframeEffect だけです。

null（既定値）にすると、効果を適用しないことを示します。

timeline 省略可。アニメーションを関連付けるタイムラインを表す、AnimationTimeline オブジェクトを指定します。初期値・規定値は document.timeline です。

null に設定することも可能ですが、¶アニメーションは動きません。

現在利用できるタイムラインは documentTimeline だけですが、将来的にはジェスチャーやスクロールに関連するタイムラインも利用できるようになるかもしれません。

例
mdnより

では、Animation() コンストラクターを使用して Animation を rabbitDownKeyframes に対して、文書の timeline を使用して生成しています。

HTML： 

<div class="wrapper">
  <div class="page">
      <div class="background"></div>
      <div id="rabbit">Click the rabbit's ears!</div>
      <div class="foreground"></div>
      <p>She was just in time to see him pop down a hole between a great tree's roots.</p>
  </div>
</div>

CSS： 

/* Possibly Interesting Stuff */
#rabbit {
  background: url('https://assets.codepen.io/641/park5_rabbit.png') 0 0 / 100% 100%;
  cursor: pointer;
  position: absolute;
  top: 15%;
  left: 60%;
  width: 14.64844%;
  padding-top: 31.00586%;
}

body {
  background: #000;
}
.wrapper {
  max-width: 133.33vh;
  margin: 0 auto;
}
.page {
  background: #431236;
  height: 0;
  overflow: hidden;
  padding-top: 75%;
  position: relative;
  text-indent: 100%;
  white-space: nowrap;
}

.foreground {
  height: 100%;
  background: url('https://assets.codepen.io/641/bg_park5_2.png') no-repeat 100% 100% / 100% auto;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.background {
  background: url('https://assets.codepen.io/641/bg_park5_1.png') no-repeat 0 0 / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

JavaScript： 

var whiteRabbit = document.getElementById("rabbit");

var rabbitDownKeyframes = new KeyframeEffect(
    whiteRabbit, 
    [
      { transform: 'translateY(0%)' }, 
      { transform: 'translateY(100%)' }
    ], 
    { duration: 3000, fill: 'forwards' }
  );

var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);

// On tap or click,
whiteRabbit.addEventListener("mousedown", downHeGoes, false);
whiteRabbit.addEventListener("touchstart", downHeGoes, false);

// Trigger a single-fire animation
function downHeGoes(event) {

  // Remove those event listeners
  whiteRabbit.removeEventListener("mousedown", downHeGoes, false);
  whiteRabbit.removeEventListener("touchstart", downHeGoes, false);  

  // Play rabbit animation
  rabbitDownAnimation.play();
}
簡単なアニメーション

HTML： 

<DIV id=IdTest style="width:1em">■</DIV>
<SPAN id=IdLog></SPAN>

JavaScript： 

KE=new KeyframeEffect(  //アニメーション効果：
  IdTest,  //ターゲット要素。
  [        //キーフレーム。
    {transform:'translateX(0)'}, {transform:'translateX(200px)'}  //X軸移動。
  ], 
  {duration:3000, fill:'forwards'}  //掛ける時間、プロパティの反映の仕方。
);
Ani=new Animation(KE, document.timeline);  //アニメーション生成。
Ani.play();  //再生。

timeline が null だとアニメーションが動作しない。

→KeyframeEffect()、CSS：transform。CSS：translateX()。duration、fill。play()。

テスト