自己整理的css3动画库，附下载链接

Darkgel 发布于2019-04-23 14:38 / 2973人阅读

摘要：动画以低速开始，然后加快，在结束前变慢。在函数中自己的值。在所指定的一段时间内，在动画显示之前，应用开始属性值在第一个关键帧中定义。

动画调用语法 animation: bounceIn 0.3s ease 0.2s 1 both; 按顺序解释参数：动画名称如：bounceIn 一周期所用时间如：0.3s 速度曲线如：ease

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

动画开始时间如： 0.2s 播放次数如：1 如果要一直循环就设置 infinite 动画在播放之前或之后，其动画效果是否可见如：both

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

兼容性设置动画 -webkit-animation:bounceInDown 0.3s ease 0.2s 1 both; -moz-animation:bounceInDown 0.3s ease 0.2s 1 both; -ms-animation:bounceInDown 0.3s ease 0.2s 1 both; -o-animation:bounceInDown 0.3s ease 0.2s 1 both; animation: bounceInDown 0.3s ease 0.2s 1 both; 本css中的动画效果 vanishIn 中心缩小的模糊变清楚后显示 vanishOut 中心放大清楚变模糊后消失 twisterInUp 从右侧螺旋转进来放大 slideUp 向上移动 slideDown 向下移动 puffOut 中心放大清楚变粒子后消失 puffIn 从外向中心缩小出现 twisterInDown 从左侧螺旋转进来放大 rollIn 从左侧翻滚进来 lightSpeedIn 从右侧光速进入 lightSpeedOut 光速出去 fadeIn 原地淡入· fadeOut 原地淡出 fadeInLeft 从左侧移入，淡入 fadeInRight 从右侧移入，淡入 fadeInDown 从上方移入，淡入 fadeInUp 从下方移入，淡入 fadeOutDown 向下移出，淡出 fadeOutLeft 向左移出，淡出 fadeOutRight 向右移出，淡出 fadeOutUp 向上移出，淡出 swing 扭动摇晃 wobble 左右大幅度摇晃 rotateIn 旋转360度 flip 横向翻转 zoomIn 中心放大显示 zoomOut 向中心缩小消失 bounceIn 从中心扩大弹出显示 bounceInLeft 从左侧弹入 bounceInRight 从右侧弹入 bounceInUp 向上弹入 bounceInDown 向下弹入 bounceOut 向中心弹出消失 bounceOutDown 向下弹消失 bounceOutLeft 向左弹消失 bounceOutRight 向右弹消失 bounceOutUp 向上弹消失 rollOut 向右滚出消失 rubberBand 原地弹性弹一下 heartbeat 原地像心跳一样弹一下 flipOutY y轴翻转消失 flipInX x轴翻转显示 flipInY y轴翻转显示 flipOutX x轴翻转消失 tada 原地抖动 jello 原地斜向抖动 flash 原地闪烁 pulse 原地轻微放大后还原 sharp 模糊到清楚显现 scaleUp 原地放大 scaleDown 原地缩小 blur 原地变模糊保持模糊状态 start 闪现一下消失 rightflip 闪现一下向右消失 shake 原地抖动 hinge 剥落 boingInUp 向前荡入 holeOut 缩小翻转收走最后附：下载连接

云服务器 GPU云服务器 java 动画库 html链接动图下载链接 cdn下载链接

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2321.html

前端常用插件、工具类库汇总

摘要：页面调试腾讯开发维护的代码调试发布，错误监控上报，用户问题定位。同样是由腾讯开发维护的代码调试工具，是针对移动端的调试工具。前端业务代码工具库。动画库动画库，也是目前通用的动画库。本人微信公众号：前端修炼之路，欢迎关注本篇文章整理自己使用过的和看到过的一些插件和工具，方便日后自己查找和使用。另外，感谢白小明，文中很多的工具来源于此。弹出框 layer：http://layer....

GitCafe 2019-08-23 13:57 评论0 收藏0
可能是最全的前端动效库汇总

摘要：非常的庞大，而且它是完全为设计而生的动效库。它运行于纯粹的之上，是目前最强健的动画资源库之一。可能是创建滚动特效最好用的工具，它支持大量的浏览器，只要它们支持和特性。可以通过安装吊炸天了，接近现实生活中的物理运动碰撞惯性动画库。收集日期为2019-02-28，★代表当时的该项目在github的star数量 Animate.css 56401 ★ 一个跨浏览器的动效基础库，是许多基础动...

afishhhhh 2019-05-23 16:24 评论0 收藏0
2018年值得期待11个Javascript动画库

摘要：超过的，是一个动画库，可以处理属性，单个转换，或任何属性以及对象。在，是一个快速的动画引擎，具有与的相同的。在，这个功能和反应动画库只重。由和其他人使用，这个库既流行又令人惊讶地有用。在浏览网页寻找一个整洁的Javascript动画库时，我发现很多recommended的动画库一段时间都没有维护。经过一些研究，我收集了11个最好的库，在你的应用程序中使用。我还添加了一些，主要是非维...

call_me_R 2019-08-22 18:47 评论0 收藏0
2018年值得期待11个Javascript动画库

摘要：超过的，是一个动画库，可以处理属性，单个转换，或任何属性以及对象。在，是一个快速的动画引擎，具有与的相同的。在，这个功能和反应动画库只重。由和其他人使用，这个库既流行又令人惊讶地有用。在浏览网页寻找一个整洁的Javascript动画库时，我发现很多recommended的动画库一段时间都没有维护。经过一些研究，我收集了11个最好的库，在你的应用程序中使用。我还添加了一些，主要是非维...

teren 2019-08-02 10:56 评论0 收藏0