animate()的使用

实例1. 页面背景色进行了红绿蓝的依次过渡，3s后结束

document.body.animate(

    [{'background': 'red'}, {'background': 'green'}, {'background': 'blue'}]

    , 3000);

 

实例2. 第一个参数是关键帧数组frames[]，对应CSS3中的@keyframes，每一帧的描述与css3极其类似；第二个参数是时间控制timing，包括有duration持续时间、iterations执行次数、direction动画方向、easing缓动函数等属性

 

 

var dot = document.querySelector('.dot');

  var frames = [

    {transform: 'rotate(0deg) translate(80px)'},

    {transform: 'rotate(360deg) translate(80px) '},

  ];

  var timing = {

    duration: 2500,         //ms

    delay: 0,               //ms

    iterations: Infinity,   //1, 2, 3 ... Infinity

    direction: 'alternate', //'normal', 'reverse'等

    easing: 'ease-in-out',  //'linear', 'ease-in'等

    fill: 'forwards',       //'backwards', 'both', 'none', 'auto'

  };

  dot.animate(frames, timing);

 

 

效果如图：