提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

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

2023-03-09 22:06:13 时间

简介

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

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

项目地址是：

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

安装

  • 使用 npm 安装：
  1. $ npm install animate.css --save 
  • 使用 yarn 安装：
  1. $ yarn add animate.css 
  • 使用 CDN 直接引入：
  1. <head> 
  2.   <link 
  3.     rel="stylesheet" 
  4.     href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" 
  5.   /> 
  6. </head> 

简单使用

  • 基本用法。安装 animate.css 后，将以下属性添加到中即可完成动画效果的创建。
  1. <h1 class="animate__animated animate__bounce">An animated element</h1> 
  • 自定义属性。使用自定义属性来定义动画持续时间、延迟，这使得它非常灵活，当需要更改动画持续时间的时间，只需要为全局或本地设置一个新值。
  1. /* This only changes this particular animation duration */ 
  2. .animate__animated.animate__bounce { 
  3.   --animate-duration: 2s; 
  4. } 
  5.  
  6. /* This changes all the animations globally */ 
  7. :root { 
  8.   --animate-duration: 800ms; 
  9.   --animate-delay: 0.9s; 
  10. } 
  • 同时自定义属性还可以动态更改所有时间受限的属性，可以通过 JS 脚本动态修改。
  1. // All animations will take twice the time to accomplish 
  2. document.documentElement.style.setProperty('--animate-duration', '2s'); 
  3.  
  4. // All animations will take half the time to accomplish 
  5. document.documentElement.style.setProperty('--animate-duration', '.5s'); 
  • 延迟效果：可以直接在元素的 class 属性上添加延迟效果：
  1. <div class="animate__animated animate__bounce animate__delay-2s">Example</div> 
  2.  
  3. // animate.css 提供了这些延迟属性： 
  4. class               默认延迟时间 
  5. animate__delay-2s   2s 
  6. animate__delay-3s   3s 
  7. animate__delay-4s   4s 
  8. animate__delay-5s   5s 
  9.  
  10. // 也可以通过 --animate-delay 属性进行自定义： 
  11. /* All delay classes will take 2x longer to start */ 
  12. :root { 
  13.   --animate-delay: 2s; 
  14. } 
  15.  
  16. /* All delay classes will take half the time to start */ 
  17. :root { 
  18.   --animate-delay: 0.5s; 
  19. } 
  • 动画速度：可以通过添加这些 class 来控制动画的速度：
  1. <div class="animate__animated animate__bounce animate__faster">Example</div> 
  2.  
  3. // 速度的 class 包括这些： 
  4. class            默认速度 
  5. animate__slow    2s 
  6. animate__slower  3s 
  7. animate__fast    800ms 
  8. animate__faster  500ms 
  9.  
  10. // 可以通过 --animate-duration 全局或本地属性自定义动画时间： 
  11.  
  12. /* All animations will take twice as long to finish */ 
  13. :root { 
  14.   --animate-duration: 2s; 
  15. } 
  16.  
  17. /* Only this element will take half the time to finish */ 
  18. .my-element { 
  19.   --animate-duration: 0.5s; 
  20. } 
  • 循环效果：可以通过添加这些 class 来控制动画的循环次数：
  1. <div class="animate__animated animate__bounce animate__repeat-2">Example</div> 
  2.  
  3. // 可供选择的 class 有： 
  4. class              循环次数 
  5. animate__repeat-1  1 
  6. animate__repeat-2  2 
  7. animate__repeat-3  3 
  8. animate__infinite  无限循环 
  9.  
  10. // 类似的，也可以自定义循环次数： 
  11. /* The element will repeat the animation 2x 
  12.    It's better to set this property locally and not globally or 
  13.    you might end up with a messy situation */ 
  14. .my-element { 
  15.   --animate-repeat: 2; 
  16. } 

 

 

相关文章