很多时候我们在开发前端页面时都会做一些动画效果来提升用户体验度和页面美观度，所以今天就来给大家推荐几个好用的JavaScript动画库，希望对各位小伙伴有所帮助！ Animate.css animat

这种整页翻转的效果主要是做rotateY的动画，并结合一些CSS的3d属性实现。 主要是通过计算页面翻折过来的位置。 这两种原理上都不是很复杂，需要各个细节配合好，形成一个连贯的翻书动画。 我们先重点说一下第一种翻页效果的实现。 1. 基本布局 一个li.paper就表示一张纸…

一. 展示型动画 VS 交互性动画 展示型动画在实际使用的场景中，实现的方法很多，比如用gif图，canvas，css3动画等，但是最终输出的结果是不带有交互的，也就是从动画起始状态到结束状态一气呵成，这个过程用户可以感知，但是无法参与。对于交互性动画而言，我们可以在动画播放的…

开始的时候就有过来人的同事提醒过要我注意下微信的视屏自动播放，经过别人的反馈，其实不止是微信不允许，有些机器浏览器也是不允许，这个时候该怎么办？结合 touch 事件一起实现。视频播放是监听 scroll 事件，等到可视范围内调用 video.play() 自动播放，既然有些浏…

技术上没太大难度，有难度的地方是怎么让整个动画比较流畅。一个主要问题是动画的滞后性：当下载进度到某个点的时候，你再用250ms的动画过渡过去，这个时候已经慢了，所以很多人可能因为这个原因或者嫌麻烦，直接就不做动画了，在进度事件触发的时候直接更新进度条相应的位置，不过我们可以尝试…

一个跨浏览器的动效基础库，是许多基础动效的解决方案。从经典的弹跳动效到独特的扭曲动效，一应俱全。 文件大小：55.2 kB. 和其他的同类工具不同的地方在于，它不仅仅是一个库，而是有这用户可以直接操作的实际功能，它带有一个完整的网页构建器。Bounce.js 是为数不多的可以直…

在二维平面内，我们用(x, y)来表示点的位置，通过向坐标原始值累加偏移值即可将点移动。但在三维空间内除了位置偏移外，还存在着旋转变化，因此空间内的每个物体都具有至少两个基础特性：位置和方向。位置我们可以用坐标来表达，那么方向由什么概念来表达呢？ 三维空间中物体的旋转变化，可…

用 CSS 能够做到什么？啥都有可能，看看这一年最美的动效吧，让你感受到帅气的动画哦！