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 });