# animate.css

**Repository Path**: gitphx/animate.css

## Basic Information

- **Project Name**: animate.css
- **Description**: 更方便更快速更易用的css animate
- **Primary Language**: CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://xulc.com/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 44
- **Created**: 2022-07-12
- **Last Updated**: 2022-07-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 初衷
基于css3的动画库非常多，但是总觉得没有合适自己的动画库，总会存在一些局限性。

### 设计思路
花几分钟阅读，能让你快速上手这个库的使用方法。    
**设计思路只有一条： 基于CSS3动画定义规则** 。    
首先看CSS3动画语法如下：
```
animation: name duration timing-function delay iteration-count direction;
```
对应的中文翻译：    
```
animation: 动画名称 动画完成所花费的时间 动画曲线 动画延迟执行时间 动画播放次数 动画是否反向播放;     
```

设计思路就是动画必须的属性都单独内置class名称，给一个html标签配置“动画名称、动画时间、延迟时间、播放次数、是否反向播放”对应的class，就能创建出丰富的动画效果了，并且配置不一样的class名，就能搭配不一样的动画效果。     

### 举例说明
1、 **创建标签** 
```
<div><div>
```
2、 **申明动画名称** ，比如“从上往下渐显”
```
<div class="showInTop"><div>
```
3、 **申明动画执行的时间** ，比如“1秒”
```
<div class="showInTop a-time1"><div>
```
4、 **申明播放次数** ，上面步骤是只执行一次的动画，正常情况下，要么是播放一次，要么是永久播放，如果需要永久播放，我们继续加播放次数的class即可，有如下两种方式    
```
//永久播放
<div class="showInTop a-time1 a-yj"><div>
//永久+反向播放
<div class="showInTop a-time1 a-yjfx"><div>
```
5、 **申明延迟播放** 
```
//比如延迟300毫秒后播放，加上a-delay003的class即可
<div class="showInTop a-time1 a-delay003"><div>
```
从我这边使用的场景来看，在申明动画名称和时间后，是否永久播放和延迟时间属于搭配用法，后面再给几个常见的搭配方案用法说明。

### 进阶用法

主要是搭配不一样的延迟时间来达到联动的效果。     
以H5场景秀为例，一般一个页面会有多个动画元素，且有些动画是按照顺序播放的。    
 **比如下面这张图（嫌弃麻烦的话，可以直接下载demo1查看效果，后续会持续加入其他demo）**     
![输入图片说明](https://gitee.com/uploads/images/2018/0212/114317_f4920d64_75933.png "QQ截图20180212114448.png")

播放顺序是：1、第一行标题渐显；2、第二行说明文字渐显；3、底部说明文字从下往上渐显；4、中间建筑和文字渐显。    
如果接到这个要求，你在没有使用动画库的情况下，你需要自己定义动画方法、时间等等，做完这些工作，需要多久时间？    
如果你使用了其他的动画库，动画库都只提供了动画方式，动画时间是内置不可修改的，延迟也没有提供，你需要自己额外做延迟的工作，这些需要多久时间？    
但我这个库就厉害了，对于CSS，你可以实现0编码，只需添加class名称，就能完成这个需求，在动画上的耗时几乎为0，实现步骤如下。    
1、准备好基础布局
```
<div>第一行标题</div>
<div>第二行说明文字</div>
<div>中间建筑</div>
<div>底部说明文字</div>
```
2、定义动画名称和时间(时间都定为300毫秒)
```
<div class="fadeIn a-time003">第一行标题</div>
<div class="fadeIn a-time003">第二行说明文字</div>
<div class="fadeIn a-time003">中间建筑</div>
<div class="showInBottom a-time003">底部说明文字</div>
```
3、重点来了，加上动画时间和名称后，所有元素都是同步执行的，如果做到4个元素顺序执行，只需要考虑一下各时间的延迟就行，我们按照需要的延迟时间来加上延迟定义。
```
<div class="fadeIn a-time003">第一行标题</div>
<div class="fadeIn a-time003 a-delay003">第二行说明文字</div>//延迟300毫秒，这时候动画1已播放完成
<div class="fadeIn a-time003 a-delay007">中间建筑</div>//延迟700毫秒，这时候动画2已播放完成，动画3已播放500毫秒
<div class="showInBottom a-time003 a-delay005">底部说明文字</div>//延迟500毫秒，这时候动画2已播放500毫秒
```
这样一个顺序播放的整体动画就已经完成，是不是非常简单？

### 动画名称说明
内置的动画效果见animate.html文件，直接拷贝就可以使用，如果有需要其他的效果，请联系我来增加，联系方式可以留言或者QQ：413870769    

### 动画时间
动画时间以0.3秒、0.5秒、0.7秒、0.9秒、1秒这样一个区间累加，对照表如下：     
0.3秒 a-time003        
0.5秒 a-time005        
0.7秒 a-time007        
0.9秒 a-time009        
1秒 1秒 a-time1        
1.3秒 a-time013        
1.5秒 a-time015        
1.7秒 a-time017        
1.9秒 a-time019        
2秒 1秒 a-time2      
...
15.9秒  a-time159      

### 动画延迟时间
规则与动画时间类似，对照表如下：     
0.3秒 a-delay003        
0.5秒 a-delay005        
0.7秒 a-delay007        
0.9秒 a-delay009        
1秒 1秒 a-delay1        
1.3秒 a-delay013        
1.5秒 a-delay015        
1.7秒 a-delay017        
1.9秒 a-delay019        
2秒 1秒 a-delay2      
...     
15.9秒  a-delay159

### 其他配置
需要动画永久播放,以及永久并反向播放时，直接搭配如下class即可：     
永久播放+反向+匀速：a-yjfx
永久播放+匀速：a-yj