八个解决你80%需求的CSS动画库

点击打开视频讲解

在学习和工作的过程中    
    
    
    
，我们总免不了要写各种各样的css动画   


     


     


     


  ，给某个部分添加动画效果



 




 




 




 
，如果觉得自己写的动画效果单一乏味   

   

   

   

，不妨试试这8个CSS动画库    

     

     

     

 ，值得收藏使用  
    
    
    
  。

一    
    
    
    
、hover.css

开箱即用的鼠标悬停动画




  




  




  




  ，支持的动画类型有： 2D Transitions （2D过度） Background Transitions （背景过度） Icons Transitions （图标过度） Border Transitions （边框过度） Shadow and Glow Transitions（阴影过度） Speech Bubbles （气泡效果过度） Curls （卷积过度）

二   


     


     


     


  、Animate.css

一款跨浏览器的简单便捷的CSS动画库 提供了非常丰富的动画效果  


  


  


  


，目前很多开源项目都用到了它 H5-Dooring和DooringX也内置了很多它的动画效果

三



 




 




 




 
、Magic.css

gitLab 动画效果非常震撼     
     
     
     
，如果大家想做一个比较炫酷的网站




   




   




   




   ，可以参考使用这款css库

四   

   

   

   

、CSShake.css

一个能够提供震动和晃动Dom元素的CSS库 在移动端模仿手机震动
 



 



 



 


，QQ窗口震动

五    

     

     

     

 、hint.css

一个用纯 css 和 html 实现的提示库. 体积超级小, 对于一些位置固定的提示场景, 非常有用, 不用担心包体积过大的烦恼~

六




  




  




  




  、kite.css

一个兼容性极好且灵活的布局 css 库. 使用inline-block                    ，基于 OOCSS 和 MindBEMding, 可以 帮助我们快速构建组件.

七  


  


  


  


、Three Dots

Three Dots是一组CSS加载动画 




    




    




    




   ，它由三个点组成



















，而这些点仅由单个元素组成

     


     


     


     
。

用法

只需创建一个div元素                    ，并添加动画的名称 <div class="dot-elastic"></div>

八     
     
     
     
、Angrytools

如果使用不同的生成器  



     



     



     



   ，Angrytools实际上是一个集合



















，其中还包括CSS动画生成器 




 




 




 




。 它可能不像Animista那么复杂    
    
    
    
，这个站点还提供了一些自定义动画的特性   


     


     


     


  ，比如动画的持续时间 或延迟  

   

   

   

 。 还可以在其展示时间轴上添加自定义的keyframes



 




 




 




 
，然后可以直接在其中编写代码

     

     

     

     。 另外   

   

   

   

，也可以 编辑现有的  




  




  




  




。 当完成的时候    

     

     

     

 ，可以得到完整的动画代码




  




  




  




  ，也可以下载它  


  


  


  


。