×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

7.1万Star！超实用，60多种动画效果的CSS库

简介

animate.css 是一个有趣的，跨浏览器的 css3 动画库，兼容性好，使用方便。它预设了抖动、闪烁、弹跳、翻转、旋转、淡入淡出等多达 60 多种动画效果，几乎包含了所有常见的动画效果。

沙洋网站制作公司哪家好，找成都创新互联公司！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。成都创新互联公司公司2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联公司。

animate.css 基于 CSS3，只兼容支持 CSS3 animate 属性的浏览器，IE10+、Firefox、Chrome、Opera、Safari。

项目地址是：

https:// github.com/animate-css/ animate.css

安装

 
 
 
 
    
  
  
  
  
  1. $ npm install animate.css --save 
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. $ yarn add animate.css 
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.   
  
  
  
  
  3.     rel="stylesheet" 
    4. 
  
  
  
  
  4.     href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" 
    5. 
  
  
  
  
  5.   /> 
    6. 
  
  
  
  
  6.  
    7.

简单使用

 
 
 
 
    
  
  
  
  
  1. An animated element 
    2. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. /* This only changes this particular animation duration */ 
    2. 
  
  
  
  
  2. .animate__animated.animate__bounce { 
    3. 
  
  
  
  
  3.   --animate-duration: 2s; 
    4. 
  
  
  
  
  4. } 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. /* This changes all the animations globally */ 
    7. 
  
  
  
  
  7. :root { 
    8. 
  
  
  
  
  8.   --animate-duration: 800ms; 
    9. 
  
  
  
  
  9.   --animate-delay: 0.9s; 
    10. 
  
  
  
  
  10. } 
    11. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. // All animations will take twice the time to accomplish 
    2. 
  
  
  
  
  2. document.documentElement.style.setProperty('--animate-duration', '2s'); 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. // All animations will take half the time to accomplish 
    5. 
  
  
  
  
  5. document.documentElement.style.setProperty('--animate-duration', '.5s'); 
    6. 
 
 
 
 
 
 
 
 
    
  
  
  
  
  1. Example
 
  •  
  • // animate.css 提供了这些延迟属性： 
  • class               默认延迟时间 
  • animate__delay-2s   2s 
  • animate__delay-3s   3s 
  • animate__delay-4s   4s 
  • animate__delay-5s   5s 
  •  
  • // 也可以通过 --animate-delay 属性进行自定义： 
  • /* All delay classes will take 2x longer to start */ 
  • :root { 
  •   --animate-delay: 2s; 
  • } 
  •  
  • /* All delay classes will take half the time to start */ 
  • :root { 
  •   --animate-delay: 0.5s; 
  • } 
    •  
 
 
 
      
  
  
  
  
    1. Example
     
  •  
  • // 速度的 class 包括这些： 
  • class            默认速度 
  • animate__slow    2s 
  • animate__slower  3s 
  • animate__fast    800ms 
  • animate__faster  500ms 
  •  
  • // 可以通过 --animate-duration 全局或本地属性自定义动画时间： 
  •  
  • /* All animations will take twice as long to finish */ 
  • :root { 
  •   --animate-duration: 2s; 
  • } 
  •  
  • /* Only this element will take half the time to finish */ 
  • .my-element { 
  •   --animate-duration: 0.5s; 
  • } 
    •  
 
 
 
      
  
  
  
  
    1. Example 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3. // 可供选择的 class 有： 
      4. 
  
  
  
  
    4. class              循环次数 
      5. 
  
  
  
  
    5. animate__repeat-1  1 
      6. 
  
  
  
  
    6. animate__repeat-2  2 
      7. 
  
  
  
  
    7. animate__repeat-3  3 
      8. 
  
  
  
  
    8. animate__infinite  无限循环 
      9. 
  
  
  
  
    9.  
      10. 
  
  
  
  
    10. // 类似的，也可以自定义循环次数： 
      11. 
  
  
  
  
    11. /* The element will repeat the animation 2x 
      12. 
  
  
  
  
    12.    It's better to set this property locally and not globally or 
      13. 
  
  
  
  
    13.    you might end up with a messy situation */ 
      14. 
  
  
  
  
    14. .my-element { 
      15. 
  
  
  
  
    15.   --animate-repeat: 2; 
      16. 
  
  
  
  
    16. } 
      17.

    本文标题：7.1万Star！超实用，60多种动画效果的CSS库
    新闻来源：http://cdbrznjsb.com/article/cojiccg.html

    其他资讯

    让你的专属顾问为你服务