Viewing: developer.mozilla.org

Web Animations API

Web Animations API ( ) JavaScript. API CSS Animations CSS Transitions, . , , , , Window.requestAnimationFrame().

Web Animations API, JavaScript, . DOM-heavy CSS- . CSS, JavaScript . Web Animations API . , !

CSS Animations Web Animations API

Web Animations API -: CSS Animations. CSS Animations , .

CSS

CSS, , , (. Codepen):

[Alice Tumbling down the rabbit's hole.]

, , . . CSS, .

css

#alice {
  animation: aliceTumbling infinite 3s linear;
}

@keyframes aliceTumbling {
  0% {
    color: #000;
    transform: rotate(0) translate3D(-50%, -50%, 0);
  }
  30% {
    color: #431236;
  }
  100% {
    color: #000;
    transform: rotate(360deg) translate3D(-50%, -50%, 0);
  }
}

3 () . @keyframes , 30% ( 9 ), , .

JavaScript

Web Animations API.

Keyframe Object CSS @keyframes :

var aliceTumbling = [
  { transform: "rotate(0) translate3D(-50%, -50%, 0)", color: "#000" },
  { color: "#431236", offset: 0.333 },
  { transform: "rotate(360deg) translate3D(-50%, -50%, 0)", color: "#000" },
];

, . CSS. , CSS, Web Animations API . , . , Keyframe 50% .

, , , . , 30%, 50% , : 0,333.

( ). keyframe , Element.animate() , NotSupportedError exception.

, , . , ?

(an AnimationEffectTimingProperties object) :

var aliceTiming = {
  duration: 3000,
  iterations: Infinity,
};

, CSS:

-, , - 3000, 3. setTimeout Window.requestAnimationFrame(), Web Animations API .
-, , (), .

: , CSS , -. , - "", JavaScript- . - . , , CSS-, animation-timing-function , - API -

Element.animate() :

document.getElementById("alice").animate(aliceTumbling, aliceTiming);

, ( version on Codepen).

The animate() DOM-, CSS. . , , :

document.getElementById("alice").animate(
  [
    { transform: "rotate(0) translate3D(-50%, -50%, 0)", color: "#000" },
    { color: "#431236", offset: 0.333 },
    { transform: "rotate(360deg) translate3D(-50%, -50%, 0)", color: "#000" },
  ],
  {
    duration: 3000,
    iterations: Infinity,
  },
);

, , ( ), :

document.getElementById("alice").animate(
  [
    { transform: "rotate(0) translate3D(-50%, -50%, 0)", color: "#000" },
    { color: "#431236", offset: 0.333 },
    { transform: "rotate(360deg) translate3D(-50%, -50%, 0)", color: "#000" },
  ],
  3000,
);

play(), pause(), reverse() and playbackRate

CSS- Web Animations API, API . Web Animations API . / ( full code on Codepen):

[Playing the growing and shrinking game with Alice.]

, , , . .

, :

var nommingCake = document
  .getElementById("eat-me_sprite")
  .animate(
    [{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
    {
      fill: "forwards",
      easing: "steps(4, end)",
      duration: aliceChange.effect.timing.duration / 2,
    },
  );

Element.animate() . , , Animation.pause() , :

nommingCake.pause();

Animation.play() :

nommingCake.play();

, , . :

var growAlice = function () {
  // Play Alice's animation.
  aliceChange.play();

  // Play the cake's animation.
  nommingCake.play();
};

, growAlice, :

cake.addEventListener("mousedown", growAlice, false);
cake.addEventListener("touchstart", growAlice, false);

, :

playbackRate . , . , playbackRate 1 -1:

var shrinkAlice = function () {
  aliceChange.playbackRate = -1;
  aliceChange.play();
};

bottle.addEventListener("mousedown", shrinkAlice, false);
bottle.addEventListener("touchstart", shrinkAlice, false);

Through the Looking-Glass, , , , . , , ( full code on Codepen):

[Alice and the Red Queen race to get to the next square in this game.]

, , . ( ) playbackRate .

setInterval(function () {
  // Make sure the playback rate never falls below .4
  if (redQueen_alice.playbackRate > 0.4) {
    redQueen_alice.playbackRate *= 0.9;
  }
}, 3000);

, playbackRate ( )

var goFaster = function () {
  redQueen_alice.playbackRate *= 1.1;
};

document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);

. , ? , ?

, playbackRate, , . CSS CSS, - API, ( !) document.getAnimations() :

document.getAnimations().forEach(function (animation) {
  animation.playbackRate *= 0.5;
});

Web Animations API .

, CSS Animations, . , :

duration: aliceChange.effect.timing.duration / 2;

, , :

var aliceChange = document
  .getElementById("alice")
  .animate(
    [
      { transform: "translate(-50%, -50%) scale(.5)" },
      { transform: "translate(-50%, -50%) scale(2)" },
    ],
    {
      duration: 8000,
      easing: "ease-in-out",
      fill: "both",
    },
  );

8 . :

aliceChange.pause();

, , . "" , . , Animation.currentTime 4 , :

aliceChange.currentTime = 4000;

. (currentTime), . (aliceChange) Animation.effect , , :

aliceChange.currentTime = aliceChange.effect.timing.duration / 2;

keyframe () - aliceChange.effect.timing , ( AnimationEffectTimingReadOnly) AnimationEffectTimingReadOnly.duration. , .

var drinking = document
  .getElementById("liquid")
  .animate([{ height: "100%" }, { height: "0" }], {
    fill: "forwards",
    duration: aliceChange.effect.timing.duration / 2,
  });
drinking.pause();

, .

- API, . , . . , . , , currentTime activeDuration:

var endGame = function() {

  // get Alice's timeline's playhead location
  var alicePlayhead = aliceChange.currentTime;
  var aliceTimeline = aliceChange.effect.activeDuration;

  // stops Alice's and other animations
  stopPlayingAlice();

  // depending on which third it falls into
  var aliceHeight = alicePlayhead/aliceTimeline;

  if (aliceHeight <= .333){
    // Alice got smaller!
    ...

  } else if (aliceHeight >= .666) {
    // Alice got bigger!
    ...

  } else {
    // Alice didn't change significantly
    ...

  }
}

: getAnimations() , polyfill .

CSS Animations Transitions () Web Animations API:

onfinish , finish().
oncancel , cancel().

, , endGame.

// When the cake or runs out...
nommingCake.onfinish = endGame;
drinking.onfinish = endGame;

// ...or Alice reaches the end of her animation
aliceChange.onfinish = endGame;

? Web Animations API : onfinish oncancel.

: .

- API, Firefox Chrome. " " ! API , #WAAPI. , , !