css动画随屏幕播放

CSS动画是一种非常有趣的技术，可以带来很酷的视觉效果。而让CSS动画随着屏幕滚动播放，可以让网站更加生动，让用户对网站留下深刻的印象。

实现CSS动画随屏幕播放有很多方法，其中一种比较简单的方式是使用JavaScript来检测滚动事件，并根据滚动的位置以及屏幕大小来控制CSS动画的播放。

const animations = document.querySelectorAll('.animate');

const throttle = (fn,wait) => {
  let time = Date.Now();
  
  return () => {
    if ((time + wait - Date.Now())  {
  const {scrollTop,innerHeight} = window;
  
  animations.forEach(animation => {
    const {offsetTop} = animation;
    const screenHeight = innerHeight * 0.8;
    
    if (offsetTop 

上面的代码使用了ES6的箭头函数和函数节流（throttle）来优化性能。接下来我们来解析代码：

首先，使用document.querySelectorAll('.animate')获取需要动画的元素的NodeList。然后定义了一个节流函数throttle，用于优化scroll事件的性能。

监听window的scroll事件，并在执行throttle函数的返回值时更新屏幕位置和高度，然后循环遍历animations，根据其相对于屏幕顶部的偏移量来判断其是否在屏幕内（屏幕高度的80%范围内）。如果是，则为该元素添加.active类，触发CSS动画。

最后，将节流函数的间隔时间设置为200ms，这样可以在滚动时节省一些性能，避免过度更新。

这种方法可以简单而有效地在网站中实现CSS动画的随屏幕播放，但需要注意的是，对于性能较低的设备，会导致卡顿和滚动不流畅，因此需要充分测试并考虑如何优化性能。