Anime.js 一个JavaScript动画库,可以处理CSS属性,单个CSS转换,SVG或任何DOM属性以及JavaScript对象
Velocity 一个高效的 Javascript 动画引擎,与jQuery的 $.animate() 有相同的API, 同时还支持彩色动画、转换、循环、画架、SVG支持和滚动等效果
Vivus 一个零依赖的JavaScript动画库,可以让我们用SVG制作动画,使其具有被绘制的外观
GreenSock JS 一个JavaScript动画库,用于创建高性能、零依赖、跨浏览器动画,已在超过400万个网站上使用, 并且可以在React、Vue、Angular项目中使用
Scroll Reveal 零依赖,为 web 和移动浏览器提供了简单的滚动动画,以动画的方式显示滚动中的内容
Kute.js 一个强大高性能且可扩展的原生JavaScript动画引擎,具有跨浏览器动画的基本功能

Transition.css

https://www.transition.style/#in:circle:bottom-right

AnimateMate

http://animatemate.com/

CountUp.js 数字滚动

https://github.com/inorganik/CountUp.js

Granim.js 渐变颜色动画

https://sarcadass.github.io/granim.js/examples.html

Typed.js 打字效果

https://github.com/luisvinicius167/ityped

fullPage.js 一个可轻易创建全屏滚动网站的js滚动动画库, 兼容性无可替代
iscroll 移动端使用的一款轻量级滚动插件

locomotive-scroll 视差滚动

github:https://github.com/locomotivemtl/locomotive-scroll
view: https://locomotivemtl.github.io/locomotive-scroll/

常见问题

刷新页面 animate.css 动画自动执行



给按钮添加 animate 动画刷新页面时自动执行
动画库 - 图1

可以在默认情况下设置动画时长为 0 ,这样在首次动画执行后,马上就结束了,然后在 hover时恢复默认的动画时长,由于动画已经结束,改变动画时长也不会触发动画再次运行,所以实现就是

  1. .button{
  2. animation: jump 0s;
  3. }
  4. .button:hover{
  5. animation-duration: 1s;
  6. }
  7. .button:active{
  8. animation: none;
  9. }

这样刷新页面就不会再有动画了