CSS Animations vs. Web Animations API

 

---

As we all know, JavaScript has a native animation API called Web Animations API. In the following articles, we will simply refer to it as WAAPI.

 

In this article, we will compare animations in WAPPI and CSS from various aspects. The judges can judge for themselves which one is better and which one is lacking.

 

Basic knowledge of WAAPI

 

If you've ever used jQuery .animate(), the basic syntax of WAAPI should look familiar. 

 

var element = document.querySelector('.animate-me');
element.animate(keyframes, 1000);

 

The animate method accepts two parameters: keyframes and duration. Unlike jQuery, it not only has the advantage of being built into the browser, but it also performs better.

 

The first parameter, keyframes should be an array of objects. Each object is a keyframe in our animation. Here is a simple example:

 

var keyframes = [
  { opacity: 0 },
  { opacity: 1 }
];

 

The second parameter, duration, is how long we want the animation to last. In the above example it is 1000 milliseconds. Let's look at a more exciting example.

 

 

# Recreate animista CSS animations with WAAPI

 

There's something called a "blurred slide" entry animation. looks cute.

 

Here are the keyframes in CSS:

 

0% {
  transform: translateY(-1000px) scaleY(2.5) scaleX(.2);
  transform-origin: 50% 0;
  filter: blur(40px);
  opacity: 0;
}
100% {
  transform: translateY(0) scaleY(1) scaleX(1);
  transform-origin: 50% 50%;
  filter: blur(0);
  opacity: 1;
}

 

The code in WAAPI is the same:

 

var keyframes = [
  { 
    transform: 'translateY(-1000px) scaleY(2.5) scaleX(.2)', 
    transformOrigin: '50% 0', filter: 'blur(40px)', opacity: 0 
  },
  { 
    transform: 'translateY(0) scaleY(1) scaleX(1)',
    transformOrigin: '50% 50%',
    filter: 'blur(0)',
    opacity: 1 
  }
];

 

We've seen how easy it is to apply keyframes to any element you want to animate:

 

element.animate(keyframes, 700);

 

For simplicity, I only specified duration. However, we can use this second parameter to pass more options. At least we should also specify an easing. Here is the full list of available options, with some example values:

 

var options = {
  iterations: Infinity,
  iterationStart: 0,
  delay: 0,
  endDelay: 0,
  direction: 'alternate',
  duration: 700,
  fill: 'forwards',
  easing: 'ease-out',
}
element.animate(keyframes, options);

 

With these options, our animation will start from the beginning without any delay and the loop will play forward and backward forever.

   Click me to view the code and effect! ! !

For more click here: http://igeekbar.com/igeekbar/post/245.htm