动画组件大全

　　前端学习工具分享又来啦~
　　许多学习前端的小伙伴面对领导要求的炫酷的页面，真的是一筹莫展，本来想揪头发，突然想起自己早就秃了。是时候找一些合适的动画组件来解决我秃头，哦不，我现在的难题了！
　　动画组件是什么？
　　说到动画组件，就不得不提一下框架和库了，大部分的动画组件都是在框架和库的基础上进行编程的。举一个让大家都明白的例子，咱们做菜的时候，框架和库就相当于做菜的原材料白菜啊，土豆什么的，而动画组件就是炒菜所需要的工具啦！至于菜做成什么样子就看你自己啦！是不是很容易理解，对不对？
　　今天，贴心的小渡叭就和大家聊一下关于动画组件的那些事儿，有用的，小伙伴赶紧拿走！
　　1animate.css – A cross-browser library of CSS animations.
　　首先咱们就先聊聊animate.css啦！animate.css 为css动画库，使用css3关键帧的keyframes实现动画，性能相对于jquery的anmiate要高。
　　同时animate.css是一个使用CSS3的animation制作的动画效果的CSS集合，里面预设了很多种常用的动画，且使用非常简单。
　　animate.css由于它是把不同的动画绑定到了不同的类里，所以想要使用哪种动画，只需要把通用类animated和相应的类添加到元素上就行了。
　　animate.css主要包括Attention(晃动效果)、bounce(弹性缓冲效果)、fade(透明度变化效果)、flip(翻转效果)、rotate(旋转效果)、slide(滑动效果)、zoom(变焦效果)、special(特殊效果)这8类特殊的效果。如果你想要做的页面恰好需要这几个效果的话，那你选择animate.css肯定没有错！
　　2Transit – CSS transitions and transformations for jQuery
　　transit 为jQuery的动画库, 可以使用package_json安装或者外链形式引入使用，是通过传值的方式由js做动画！
　　通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。
　　过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果。
　　注意
　　1，IE9-不支持该属性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀；而其余高版本浏览器支持标准写法。
　　2，transition的这四个子属性之间不能用逗号隔开，只能用空格隔开。因为逗号隔开的代表不同的属性(transition属性支持多值，多值部分稍后介绍)；而空格隔开的代表不同属性的四个关于过渡的子属性。
　　3，低版本webkit内核浏览器会出现bug，不仅复合属性被当作一个属性来触发事件，而且会多触发一次。
　　4，当过渡事件执行完后，应及时使用removeEventListener取消绑定，以免对其他效果造成影响。
　　3Move.js – 简化CSS3动画的JS库
　　move.js是一款简单的支持CSS3动画的JavaScript库，对于对CSS3的操作不是很熟悉的人来说，使用move.js提供的方法操作CSS3动画更简单方便。
　　Move.js 提供了创建 CSS3 动画的最简单的 JavaScript API，在网站上，CSS3 的过渡和动画是当前创建轻量级动画的首选方法。不幸的是，很多开发者发现他们自己的语法和复杂和混乱的。如果这听起来像你自己，对你来说，或许Move.js是完美的方案。Move.js是使用简单函数创建 CSS3 动画的一个简单的JavaScript库。
　　4ScrollMe – 在网页中加入各种滚动动画效果
　　ScrollMe是一个页面添加简单的滚动效果的jQuery插件，当你向下滚动页面时，ScrollMe可以对页面元素进行轴标扫描、旋转、转换和改变不透明度，从而让整个页面动感起来。ScrollMe非常容易使用，它不需要写JS代码，只需在元素中写上属性就OK了。
　　注意
　　不要在页面内添加过多的滑动特效. 适度使用，否则会影响页面性能。
　　ScrollMe不是一个前端框架，不是这个 or 这个. ScrollMe没那么复杂，也没那么多功能，它就是加点儿小特效的.
　　旧版浏览器慎用ScrollMe只能在支持相应CSS属性的浏览器内工作，其他的就无力了。
　　5Effeckt.css – A Performant Transitions and Animations Library
　　Effeckt.css是一个集合了众多新鲜而又实用的CSS/jQuery动画效果应用，既适用于网站也适用于手机Web开发，例如：弹窗、按钮、导航、列表、页面切换等等，这些特效动画都能给你的网站提升一定用户体验，而且简单实用。
　　目前，网上有大量基于CSS转换的实验和示例，但它们都过于分散，而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来。
　　6NEC动画库
　　NEC是网易前端CSS开源项目代号，包括了规范、框架、代码库、插件等内容，致力于为前端开发人员提供高效率高质量的前端页面开发解决方案，也为非专业人员提供快速制作网页的解决方案。
　　同时NEC有包括插件库，框架库，代码库等等任大家选择。
　　7csshake – CSS classes to move your DOM
　　csshake是一款非常强大的CSS3元素抖动动画库插件。csshake可以使元素进行各种各样的抖动动画，可以在加载时就抖动或鼠标滑过元素时抖动，目前共有10种抖动效果。非常简单实用。
　　如果大家对于＂抖动＂有点不太理解，其实就是字面意思——让元素抖动。这个插件基于jquery开发，提供多种抖动方式，极其炫酷。如果配上背景音乐那就更带感了。
　　8magic – CSS3 Animations with special effects
　　Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包，你可以自由地使用您的 Web 项目中。只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 magic.min.css 就可以使用了。 这个项目现在GitHub上，包含 bling, perspective, rotate, slide, tin, bomb 等众多特效。
　　注意事项：其中magictime决定动画的持续时间，必须添加的样式名，也可以通过jQuery来实现。
　　9Hover.css
　　hover.css-纯CSS3鼠标滑过图片效果动画库，总共有44种鼠标滑过效果。
　　注意
　　1，hover 选择器器可用于所有元素，不仅是链接。
　　2， Link选择器设置了未访问过的页面链接样式, visited选择器设置访问过的页面链接的样式.active选择器设置当你点击链接时的样式。
　　3，为了产生预期的效果，在 CSS 定义中，hover 必须位于 link 和 visited 之后！！
　　10css-loaders
　　Loaders.css利用纯CSS可以实现很多种样式的Loading加载动画，这些动画并不需要图片来辅助，而是仅仅需要CSS即可实现，因此运行效率比较不错。
　　Loaders.css是基于纯CSS，不需JavaScript脚本，也不需要图片，很干净。默认提供近30个不同的Loading动画效果，你也可以发挥自己的想象来实现不同的加载动画。同时Loaders.css比较轻巧，基本没什么臃肿的文件，免费、开源，这是必须的。
　　11SpinKit
　　spinkit使用CSS3的特性实现多种动画效果，元素移动、放大缩小、翻转、进度条加载效果等等，使用了很多CSS3新的特性，是一个学习CSS3不错的网站。
　　SpinKit 用来实现各种动态的 Activity Indicator，用于表示正在加载、正在运行等等状态。
　　今天为大家盘点的动画组件就到这里啦~今天盘点的动画组件只是茫茫组件中的一部分。但是这是大部分前端小伙伴们都在用的组件哦~小伙伴们可以有时间根据自己页面和框架的需要选择尝试一下哦~
　　不过说真的，小渡发现由于框架和页面的需求不同，每个公司和小伙伴的选择也各不相同。学会这么多的动画组件，能让你省心不少呢~小伙伴，加油啦！