江苏龙网

  1. 首页 > 人文 > >

能解决 80% 需求的 10个 CSS动画库

作者：PatrikKiss译者：前端小智来源：dev
1.Animista网站地址:网站描述:在线生成css动画
1.选择不同的动画我们可以选择想要的动画类型（例如entrance/exist） ， 除了可以选择某个动画（例如 ， scale-in）外 ， 甚至还可以为该动画选择不同的展示效果（例如：scale-in-right） 。
durationdelaydirection更好的是 ， 可以选择要设置动画的对象:
网站描述:齐全的CSS3动画库
1.用法首先 ， 必须在总需要动画元素上添加类animated ， 然后是动画的名字 。
如果我们想让动画一直持续 ， 可以添加infinite类 。
通过JS来添加动画：
document.querySelector('.my-element').classList.add('animated','slideInLeft')通过JQ来添加动画：
$(".my-element").addClass("animatedslideInLeft")2.其它功能AnimateCSS提供了一些基本的类来控制动画的延迟和速度 。
**delay**
可以添加delay类来延迟动画的播放 。
**speed**
我们还可以通过添加如下列出的类之一来控制动画速度 。
类名速度时间show2sslower3sfast800msfaster500ms
3.Vivify网站地址:
网站描述:一个更加丰富css动画库
使用JS方式：
document.querySelector('.my-element').classList.add('vivify','slideInLeft')使用JQ方式：
$(".my-element").addClass("vivifyslideInLeft")与AnimateCSS一样 ， Vivify还提供了一些类来控制动画的持续时间和延迟 。
延迟和持续时间类在以下间隔中可用：
4.MagicAnimationsCSS3网站地址:
网站描述:MagicCSS3Animations是CSS3动画的包 ， 伴有特殊的效果 ， 用户可以自由的在web项目中使用 。
使用JS方式：
document.querySelector('.my-element').classList.add('magictime','fadeIn')使用JQ方式：
$(".my-element").addClass("magictimefadeIn")5.cssanimation.io cssanimation.io是一大堆不同动画的集合 ， 总共大概有200个 ， 这很强大 。 如果你连在这里都没有找到你所需的动画 ， 那么在其它也将很难找到 。
它的工作原理与Animista类似 。 例如 ， 可以选择一个动画并直接从站点获取代码 ， 或者也可以下载整个库 。
将cssanimation{animation_name}添加到指定的元素上 。
使用JS
document.querySelector('.my-element').classList.add('cssanimation','fadeIn')使用JQ
$(".my-element").addClass("cssanimationfadeIn")还可以添加infinite类 ， 这样动画就可以循环播放 。
此外 ， cssanimation.io还为我们提供了动漫字母的功能 。 使用这个需要引入letteranimation.js文件 ， 然后将le{animation_name}添加到我们的文本元素中 。
要使字母按顺序产生动画 ， 添加sequence类 ， 要使它们随机产生动画 ， 添加random类 。
Sequence
如果使用不同的生成器 ， Angrytools实际上是一个集合 ， 其中还包括CSS动画生成器 。
它可能不像Animista那么复杂 ， 但我觉得这个也很不错 。 这个站点还提供了一些自定义动画的特性 ， 比如动画的持续时间或延迟 。
但是我喜欢的是 ， 我们可以在其展示时间轴上添加自定义的keyframes ， 然后可以直接在其中编写代码 。 另外 ， 也可以编辑现有的 。
7.Hover.css网站地址:网站描述:纯CSS3鼠标滑过效果动画库
Hover.css是许多CSS动画的集合 ， 与上面的动画不同 ， 每次将元素悬停时都会触发 。
一组CSS3支持的悬停效果 ， 可应用于链接、按钮、徽标、SVG和特色图像等 。
**用法
它非常简单:只需将类的名称添加到元素中 ， 比如
8.WickedCSS网站地址:#
WickedCSS是一个小的CSS动画库 ， 它没有太多的动画变体 ， 但至少有很大的变化 。 其中大多数是我们已经熟悉的基础知识 ， 但它们确实很干净 。
它的用法很简单 ， 只需将动画的名称添加到元素中即可 。
**使用JS
document.querySelector('.my-element').classList.add('bounceIn')**使用JQ
$(".my-element").addClass("bounceIn") ThreeDots是一组CSS加载动画 ， 它由三个点组成 ， 而这些点仅由单个元素组成 。
**用法
只需创建一个div元素 ， 并添加动画的名称
10.CSShake网站地址:#
**用法
将shake{animationname}添加到元素中 。
**使用JS**
document.querySelector('.my-element').classList.add('shake','shake-hard')**使用JQ**
$(".my-element").addClass("shakeshake-hard")原文：


    推荐阅读


    上一篇：推荐|马里总统总理被军人扣留，我驻马里使馆发布紧急提醒

    下一篇：热血忠魂|16名将军无一生还，飞机起飞8秒就爆炸，军方封锁消息11年