现在网站和App的设计越来越注重用户体验,优秀的动效可以让你的应用更具交互性,吸引更多用户的使用。我通常会在网站上添加一些简单且一致的动画效果,我通常会使用SASS+bourbon来生成那些基于CSS3的动画效果。但是如果你对CSS3中的动态效果定义不熟练,或者想以更简单直接的方式在你的应用中引入动态效果,你可以参考并使用以下10个优秀的动态效果库(工具)。1、Animate.cssAnimate.css是我最喜欢的CSS3动画库。非常适合不熟悉CSS3动画效果,但又想给自己的网站或H5类APP引入动画效果的朋友。因为,你只需要在需要实现动画效果的元素上加上Animate.css中预定义的动画名称即可。比如常见的:bounce、flash、fadeIn、fadeOut等,加起来多达75种不同的动画效果,完全可以满足你的基本需求。当然,使用这个库也有一些注意事项。比如给元素添加动画样式后必须马上移除动画样式才能完成动画效果。另外,你还需要对动画的时长、震动幅度等做一些调整。因为,我觉得默认设置下的动画太快太猛了。Animate.css提供了详细的文档告诉您如何进行这些调整。2.Bounce.jsBounce.js是一个可以生成CSS3动态效果的小工具。它是用JavaScript编写的,并提供了一个Web界面。您可以添加一个组件,然后您可以选择包括缩放、平移、旋转、倾斜和其他动态效果。您可以选择效果类型,然后分别设置它们的参数。当您想要的效果实现后,您可以将此效果导出为CSS,以便您可以将其应用到您的应用程序中。3.CSS3AnimationCSS3Animation是一个非常简单易用的动画工具。您可以通过在它提供的简单图形界面中拖动一些进度条来控制您的动画,生成的CSS代码将自动显示在下面的文本框中,您可以将其复制并粘贴到您的应用程序中以立即使用。4.CSSAnimate如果觉得以上工具都不能做出你想要的动画,可以看看CSSAnimate工具。它允许你设置更多的运动参数,比如你可以同时设置运动开始和结束状态的坐标、大小、透明度等,这样你就可以做出更复杂的运动效果。5.MagicAnimationsMagicAnimations与Animate.css非常相似,也是一个预先定义了一系列动态效果的CSS库。但是和Animate.css最大的区别可能在于它定义的动态效果更加炫酷炫酷。如果你的网站也很潮,可以考虑使用这个CSS动态效果库。6.AniJSAniJS是由JavaScript控制的动态库。它允许您通过其链接语法定义动画。例如下面的例子:当用户点击时,这个元素会沿Y轴翻转。
