? ??? ??? ?? ? Dudley Storey ?? ???? ????? ??? ??? ? ?????? ??? ??? ?? ? Web Animations API? ?????. Sitepoint? ??? ???? ?? JavaScript ???? ???? ???? ???? ?? ??????. ? ????? :

? ????? API? CSS ??, SMIL, JavaScript ? JavaScript ????? ??? ??? ?? ?? ??? ???? ??? ???? ? ?????? ?? ??? ? ?? ??? ?????. CSS ?????? ??? ???? ? ???, ?? ? JavaScript ?? ?? ???? ????? ?????. ? API? ?? CSS ??? ???? ????? ???? ???? ???? ?????? ???????. ??? ??? ???? ?? DOM ??? ???????? > ?????? JavaScript ??? ?? ??? ???? ??? ???? ?? ??? ?????. ? ???? ?? ?? ??? ???? ?? ? "to"?? "From"??? ???? ?????. ???? ?? ???? (Chrome, Firefox, Safari)? ? ????? API? ?????. ???? ?? ?????? ??? ?? ??? ??? ? ????. SVGS? ?? ? ??

?? ?????? ?? ?? API : ? ?????? ????? ? ?? ?? ??? ?? ????????. CSS ?? ? ????? : ?? ?? ? ? ???? ????? ??? ?????? ???? ? ??? ?? ??? CSS ? JavaScript? ??? ?????. ??? UI ??, ?? ? ????? ?????? ?? ?????.

????? ???? ??? ???? ??? ?????. SVG ??? ????? JavaScript :
• ? ?? ?? ???? ????? ? ??? ? ??? ?? ?? ??? ???? ??? CSS?? ????? ????. ??? API? ????? ????? ????? ??? DOM ??? ????? ? ? ????. javaScript ????? ??? ?? (? : Greensock) :
?? JavaScript? ????? ?? ????? ??? ?? ?? ?? (?????, ??, ?? ??)? ?????.
• ? ????? API? ??? ???? ?? ?? ??? ?? ???? ???? ??? ???? ?? ??????. ? ???, ?? ? JavaScript ?? ???? ?? ?? ??? ???? CSS? ??? ?? ??? ?????. ???? ??? ??? ???? ?? ??? ???? ???? ? ?????? ??? ? ??? ?????.
JavaScript? keyframes :
• ??? ?? ?? ??????? : ??? ?? ?? ?? ?? ????????. HTML ? ?? CSS? ???? ?????
  ?? ???? CSS ????? :

  <div id="redball"></div>

  ??? ? ????? api javaScript :

  body { margin: 0; background: #000; overflow: hidden; min-height: 100vh; }
  #redball { background: red; width: 30vmin; height: 30vmin; border-radius: 50%; }

  ?? ?? ? ??? ??? ?? ?? ?? ?? ?? ??????. ?? ???? ????? KeyFrame ??? ??????

  <<> ??? ?? :

  @keyframes moveBall { from { transform: translateX(-20vw); } to { transform: translateX(100vw); } }
  #redball { animation: moveBall 3s infinite; }

  <<>

  ?? ??? ??? ? ??? ?? ?????. ???? ??? ???? ??????? ?? ??? ????????. ?? ?? API? ??? ? ??? ?????? ???? ??? ?????. ??? ?????? ???? ?? ?? ?????????

  ? ?????. ??????? ?? ????, ?? ? ??? ??? ?????

  var moveBall = document.getElementById('redball').animate([{ transform: 'translateX(-20vw)' }, { transform: 'translateX(100vw)' }], { duration: 3000, iterations: Infinity, easing: 'ease' });
  moveBall.play();

  ??? ?? :

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

  ?? ?? ?? (FAQ) :

  >? ??? ??, CSS ?????? ??, ???, ????? ??, ??, ???? ??, SVG ?????, ????? ??, ?? ?? ? ??? ???? ? ????? API? ??? ??? ??? ??? ? FAQ ???? ??????. ??. <..>

? ??? ? ????? API? ???? ???? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!