5 个快速创建超棒 CSS3 动画效果的类库

如果你开发前端特效的话,肯定会首选 JavaScript 类库,例如,jQuery,使用它能够帮助你快速的帮助你生成兼容性相对良好的动画特效。或者,如果你对于兼容性没有太多的要求的话,你可以考虑使用性能更加优良的CSS3动画特效。大家可能还记得我们以前介绍过的animate.css, Easings和liffect三个超棒的CSS3动画类库吧。今天我们这里总结了5款有效帮助你生成CSS3动画效果的类库和工具,希望大家喜欢!

Animate.css

5 个快速创建超棒 CSS3 动画效果的类库_第1张图片

Animate.css。这套 CSS3 动画是由来自 Manchester, UK 的设计师 Dan Eden 开发和设计的。使用它能够很方便的给你的页面元素添加动画效果。Animate.css 可直接用于项目的有趣的、跨浏览器动画方案,包括一个纯粹的CSS3动画库及一些预定义的动画片段。

下载Zip

Liffect

5 个快速创建超棒 CSS3 动画效果的类库_第2张图片

Liffect 是一个在线的列表动画生成工具,能够帮助你针对一个ul列表来生成动画效果,你可能会经常的看到如下的动画类型:

  1. fadeIn
  2. zoomIn
  3. zoomOut
  4. slideTop
  5. slideDown
  6. pageTop
  7. pageRight

所有的以上动画特效,都可以使用Liffect轻松的生成。这个工具依赖jQueryCSS3的动画来生成以上所有的特效。最重要的是能够根据你的特效选择自动生成HTML,CSS和javascript代码。而且提供了其它的选项来有效的控制动画,例如,延迟,CSS前缀等等。相信你能更加精细的控制动画的效果。

Easings

5 个快速创建超棒 CSS3 动画效果的类库_第3张图片

如果你开发过jQuery的动画效果的话,肯定接触过一个jQuery插件:jquery.easing plugin,这个插件可以帮助你生成不同类型的动画风格。

Easings.net 这个网站介绍了不同的easing功能的特点,你可以很直观的从图表中看到区别,并且拥有中文版,相信e文不好的朋友肯定会非常喜欢!

Animatable

5 个快速创建超棒 CSS3 动画效果的类库_第4张图片

纯粹的 CSS3 动画方案。这里是 Animatable Demo,你可以看见使用它能实现什么样的动画效果。

Morf

5 个快速创建超棒 CSS3 动画效果的类库_第5张图片

Morf.js 提供了一组 JavaScript 方法用于加速 CSS3 的各种转换效果,支持的方法都在上图中,无需编写 CSS3 代码。项目地址:https://github.com/joelambert/morf

  • 来源:GBin1.com
  • 原文:5个能够有效帮助你快速创建超棒CSS3动画效果的类库

你可能感兴趣的:(5 个快速创建超棒 CSS3 动画效果的类库)