Web Animations API实现元素的淡入淡出效果实例页面

回到相关文章 »

效果：

代码：

CSS代码：

ball {
  display: block;
  width: 150px; height: 150px;
  border-radius: 50%;
  background-color: #cd0000;    
}

HTML代码：

<ball/>

JS代码：

var element = document.querySelector('ball');
element.animate([
  { opacity: 0 },
  { opacity: 1, offset: 0.4 },
  { opacity: 0 }
], {
  duration: 3000,
  fill: 'forwards',
  easing: 'steps(8, end)',
  iterations: Infinity
});