CSS ????? ?? ? ?? ?? : CSS ??? ?? ??? ???? ? ??

? ????? ?????? ?? ???? ???? ????? ??? ? CSS @keyframes ?????? ?? ?????. animation-play-state ??? ???? ??? ?? JavaScript? ?? ? ? ??? ?? ?? ??? ????. CSS ??? ?? ??? ???? ?????? ? ?? ? ????? ??? ?? ??? ?????.

?????? ?? ???? ?? ???

CSS ??? ????? ??? ? ???? ??? ??????. ???? ?????? ??? ???? ????! ?? ??? ???? ?????? ??? CPU/GPU ???? ???? ??? ??? ??? ??? ??

DevTools? ?? ??? "?? ???"???? ????? ??? ?? ?? ? ?? ??? ?????? ????? ?? ??? ? ?????? ?? ???? ??? ?? ???? ?? ?????.

??? ?????? ??? ?? ????? ???? ?? ?????.

1. ?? : ???? ?? ??? ?????.
2. ??? : ?????? ?? ??? ???? ?????.
3. ??? : ?? ???? ?????? ?? ? ? ????.

?????? ?? ???? ?? ??

CSS?? ?????? ?? ???? ??? ??? animation-play-state ??? ???? ? ??? paused ? ???? ????.

 .paused {
  ????? ???-???? : ?? ??;
}

JavaScript ??? ??? animationPlayState ?? ?? ??? ??? ????.

 emeter.style.animationPlayState = '?? ??';

animationPlayState ? ?? ?? ????? ??/?? ?? ??? ?? ? ????.

 const running = element.style.animationPlayState === 'running';
element.style.animationPlayState = ??? '?? ??': '???';

?????? ?? ???? ? ?? ??? animation-duration 0s ?? ???? ????. ?????? ??? ??? ?? ???? ?? ??? 0??? ??? ???? ????. ??? ??? ?? ?? ??? ????.

?????? ?? ?? ( animation: none !important; )? ?? ?? ??? ????.

??? ?? ? CSS??? ??? ?? ??

??? ??? ?? (? : data-animation )? CSS ???? ???? CSS ??? ?? ??? ????? ??? ??? ?????.

<div data-animation=""></div>

 [??? ?????] {
  ??:
    var (-animn, ??)
    var (-Animdur, 1s)
    var (-animtf, ??)
    var (-Animdel, 0s)
    var (-?????, ??)
    var (-Animdir, ??)
    var (-animfm, ??)
    var (-animps, running);
}

??? ?? ??? ?? ?????? ?? ??? ?? ? ? ????. CSS ??? ?? ??? ??? CSS ? JavaScript? ?? ??? ? ??? CSS ??? ?? ?? ? ??? ????.

????? ??? ??? ???? ???? [data-animation] ???? ??? ???????.

 /* ????? ???*/
.a-pulse {
  --animn : ??;
}
.A- ???? {
  --animdur : 3s;
  --animn : ????;
}

/* ? ???*/
@keyframes ?? {
  / * ... */
}
@keyframes ???? {
  / * ... */
}

? : CheckBox Trick? ???? ?????? ?? ?????

?? ?????? ?? ?? ??? ?????? ???? ????.

<input type="checkbox" id="data-animation-pause">

 [Data-Animation-Pause] : ?? ~ [???-?????] {
  --animps : ?? ??;
}

?? ?????? ?? ?????? ?? ??/????? ???? ??????.

CSS ?? ???? ?

?? ????<details></details> ??? ?? ????? autoplay ?? ????? ???? ???? ????? ????. ? ?????? ?? ? ?? ?????? ????. --animps ??? ?????? ?? ??? ???? --img-animps ??? ?? ?????? ?? ??? ?????.

GPU ???? ???? ?? ????? ?? ?????? ?? ?? ?????? ?? ???????. Chrome Browser (??)? @keyframes ??????? CSS ??? ?? ??? ???? ? ? ????.

?? ????? @keyframes ?? --img-animps ??? ????????.

 @keyframes AutoPlay {
  / * ... */
  51% {-Img-animps : paused} /* ??! */
  / * ... */
}

?? ????? ?? ??? ?? ?? running ??? ???????.

prefers-reduced-motion

prefers-reduced-motion ??? ??? ???? ??? ???? ?? ? ? ????.

 @Media (??-?? ??) {
  [data-animation = "??"] {
    -Animdur : 4S;
    --animn : ???;
  }
  / * ... */
}

JavaScript? ???? ?????? ?? ?????

JavaScript? ???? ?? [data-animation] ??? ???? --animps ??? ?? ? ? ????.

 // ... JavaScript ?? ...

IntersectionObserver ??

?????? ???? ???? ?? ????? IntersectionObserver ??? ? ????.

 // ... JavaScript ?? ...

????? ??? ?? (???)

??? ??? ???? ??? ???? JavaScript?? ?? ??????.

<audio src="your-audio.mp3"></audio>

 // ... JavaScript ?? ...

?? ??? ?? CSS ?????? ?? ? ?? ??? ???? ???? ??? ?? ? ???? ???? ? ????.

? ??? CSS ??? ?? ???? CSS ?????? ???? ?? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!