css：animate.css@4.1.1和wow.js实现网页动画效果

需要注意的是animate.css 3.x版本和4.x版本的使用方法稍有不同 4.x版本增加了一个前缀animate__减少样式冲突

文档

• wow.js: https://wowjs.uk/docs.html
• animate.css: https://animate.style/

CDN

• https://www.bootcdn.cn/wow/
• https://www.bootcdn.cn/animate.css/

通过以下代码就能很容易实现一个加载动画

.box {
  width: 300px;
  height: 300px;
  background-color: #eeeeee;
}

如果元素不在第一屏幕，就不能看到动画效果，可以通过wow.js解决

  
    .box {
      width: 300px;
      height: 300px;
      background-color: #eeeeee;
      /* 让元素在下一屏幕显示 */
      margin-top: 1000px;
    }
  

  
  

  
  
  
    var wow = new WOW({
      boxClass: 'wow',
      animateClass: 'animate__animated',
      offset: 0,
      mobile: true,
      live: true
    });
    wow.init();
  

在线Demo：https://mouday.github.io/front-end-demo/animate-wow.html