Web Animations (Santa)

An example of using Web Animation API

by Sabin Buraga

HTML

<div id="mos-craciun">🎄🎅</div>

CSS

#mos-craciun {
  font-size: 3em;
  width: 133px;
  height: 133px;
  text-shadow: 0.1em 0.1em 0.33em #693;
}

JavaScript

const mosCraciun = document.getElementById("mos-craciun"); 

mosCraciun.animate(
  [ // obiecte de tip Keyframe
    { transform: 'translateX(0) translateY(0)', 
      opacity: 0.74, 
      easing: 'ease-out' 
    },
    { transform: 'translateX(100%) translateY(100%) rotate(360deg)' },
    { transform: 'translateX(0) translateY(0)', 
      opacity: 1, 
      easing: 'ease-in' 
    }
  ], { // atribute privind animațiile 
       // vezi AnimationEffectTimingProperties 
    duration: 10000,     // 10 sec.
    iterations: Infinity // ad infinitum
  }
);