动画组件大全

　　前端学习工具分享又来啦
　　许多学习前端的小伙伴面对领导要求的炫酷的页面，真的是一筹莫展，本来想揪头发，突然想起自己早就秃了。是时候找一些合适的动画组件来解决我秃头，哦不，我现在的难题了！
　　动画组件是什么？
　　说到动画组件，就不得不提一下框架和库了，大部分的动画组件都是在框架和库的基础上进行编程的。举一个让大家都明白的例子，咱们做菜的时候，框架和库就相当于做菜的原材料白菜啊，土豆什么的，而动画组件就是炒菜所需要的工具啦！至于菜做成什么样子就看你自己啦！是不是很容易理解，对不对？
　　今天，贴心的小渡叭就和大家聊一下关于动画组件的那些事儿，有用的，小伙伴赶紧拿走！
　　1animate。cssAcrossbrowserlibraryofCSSanimations。
　　首先咱们就先聊聊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肯定没有错！
　　2TransitCSStransitionsandtransformationsforjQuery
　　transit为jQuery的动画库，可以使用packagejson安装或者外链形式引入使用，是通过传值的方式由js做动画！
　　通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。
　　过渡transition是一个复合属性，包括transitionproperty、transitionduration、transitiontimingfunction、transitiondelay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果。
　　注意
　　1，IE9不支持该属性，safari3。16、IOS3。26。1、android2。14。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动画的最简单的JavaScriptAPI，在网站上，CSS3的过渡和动画是当前创建轻量级动画的首选方法。不幸的是，很多开发者发现他们自己的语法和复杂和混乱的。如果这听起来像你自己，对你来说，或许Move。js是完美的方案。Move。js是使用简单函数创建CSS3动画的一个简单的JavaScript库。
　　4ScrollMe在网页中加入各种滚动动画效果
　　ScrollMe是一个页面添加简单的滚动效果的jQuery插件，当你向下滚动页面时，ScrollMe可以对页面元素进行轴标扫描、旋转、转换和改变不透明度，从而让整个页面动感起来。ScrollMe非常容易使用，它不需要写JS代码，只需在元素中写上属性就OK了。
　　注意
　　不要在页面内添加过多的滑动特效。适度使用，否则会影响页面性能。
　　ScrollMe不是一个前端框架，不是这个or这个。ScrollMe没那么复杂，也没那么多功能，它就是加点儿小特效的。
　　旧版浏览器慎用ScrollMe只能在支持相应CSS属性的浏览器内工作，其他的就无力了。
　　5Effeckt。cssAPerformantTransitionsandAnimationsLibrary
　　Effeckt。css是一个集合了众多新鲜而又实用的CSSjQuery动画效果应用，既适用于网站也适用于手机Web开发，例如：弹窗、按钮、导航、列表、页面切换等等，这些特效动画都能给你的网站提升一定用户体验，而且简单实用。
　　目前，网上有大量基于CSS转换的实验和示例，但它们都过于分散，而Effeckt。css的目标就是把所有基于CSSjQuery动画的应用集中起来。
　　6NEC动画库
　　NEC是网易前端CSS开源项目代号，包括了规范、框架、代码库、插件等内容，致力于为前端开发人员提供高效率高质量的前端页面开发解决方案，也为非专业人员提供快速制作网页的解决方案。
　　同时NEC有包括插件库，框架库，代码库等等任大家选择。
　　7csshakeCSSclassestomoveyourDOM
　　csshake是一款非常强大的CSS3元素抖动动画库插件。csshake可以使元素进行各种各样的抖动动画，可以在加载时就抖动或鼠标滑过元素时抖动，目前共有10种抖动效果。非常简单实用。
　　如果大家对于抖动有点不太理解，其实就是字面意思让元素抖动。这个插件基于jquery开发，提供多种抖动方式，极其炫酷。如果配上背景音乐那就更带感了。
　　8magicCSS3Animationswithspecialeffects
　　MagicCSS3Animations动画是一个独特的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之后！！
　　10cssloaders
　　Loaders。css利用纯CSS可以实现很多种样式的Loading加载动画，这些动画并不需要图片来辅助，而是仅仅需要CSS即可实现，因此运行效率比较不错。
　　Loaders。css是基于纯CSS，不需JavaScript脚本，也不需要图片，很干净。默认提供近30个不同的Loading动画效果，你也可以发挥自己的想象来实现不同的加载动画。同时Loaders。css比较轻巧，基本没什么臃肿的文件，免费、开源，这是必须的。
　　11SpinKit
　　spinkit使用CSS3的特性实现多种动画效果，元素移动、放大缩小、翻转、进度条加载效果等等，使用了很多CSS3新的特性，是一个学习CSS3不错的网站。
　　SpinKit用来实现各种动态的ActivityIndicator，用于表示正在加载、正在运行等等状态。
　　今天为大家盘点的动画组件就到这里啦今天盘点的动画组件只是茫茫组件中的一部分。但是这是大部分前端小伙伴们都在用的组件哦小伙伴们可以有时间根据自己页面和框架的需要选择尝试一下哦
　　不过说真的，小渡发现由于框架和页面的需求不同，每个公司和小伙伴的选择也各不相同。学会这么多的动画组件，能让你省心不少呢小伙伴，加油啦！