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

安装

• 使用 npm 安装：

 
 
 
 

  
  
  
  
$ npm install animate.css --save 
 
 
 
 

• 使用 yarn 安装：

 
 
 
 

  
  
  
  
$ yarn add animate.css 
 
 
 
 

• 使用 CDN 直接引入：

 
 
 
 

  
  
  
  
 
  
  
  
  
  
  
  
  
  
    rel="stylesheet" 
  
  
  
  
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" 
  
  
  
  
  /> 
  
  
  
  
 
 
 
 
 

简单使用

• 基本用法。安装 animate.css 后，将以下属性添加到中即可完成动画效果的创建。

 
 
 
 

  
  
  
  
An animated element 
 
 
 
 

• 自定义属性。使用自定义属性来定义动画持续时间、延迟，这使得它非常灵活，当需要更改动画持续时间的时间，只需要为全局或本地设置一个新值。

 
 
 
 

  
  
  
  
/* This only changes this particular animation duration */ 
  
  
  
  
.animate__animated.animate__bounce { 
  
  
  
  
  --animate-duration: 2s; 
  
  
  
  
} 
  
  
  
  
 
  
  
  
  
/* This changes all the animations globally */ 
  
  
  
  
:root { 
  
  
  
  
  --animate-duration: 800ms; 
  
  
  
  
  --animate-delay: 0.9s; 
  
  
  
  
} 
 
 
 
 

• 同时自定义属性还可以动态更改所有时间受限的属性，可以通过 JS 脚本动态修改。

 
 
 
 

  
  
  
  
// All animations will take twice the time to accomplish 
  
  
  
  
document.documentElement.style.setProperty('--animate-duration', '2s'); 
  
  
  
  
 
  
  
  
  
// All animations will take half the time to accomplish 
  
  
  
  
document.documentElement.style.setProperty('--animate-duration', '.5s'); 
 
 
 
 

• 延迟效果：可以直接在元素的 class 属性上添加延迟效果：

 
 
 
 

  
  
  
  
Example