CSS动画
# 动画
### 一. transform(变换)
#### transform包含以下几种: translate(移动), rotate(旋转),scale(缩放),skew(扭曲),matrix(矩阵变形)
##### 1.translate
使用translate的步骤：
1. 给元素添加 **转换属性** `transform`
2. 属性值为 `translate(x,y)` 如 `transform:translate(50px,50px)`; 也可以单独写translateX( ),translateY( ),如 `transform:translateX(50px)` `transform:translateY(50px)`;
##### 2.rotate: 指的是让元素在平面内顺时针旋转或者逆时针旋转
使用rotate步骤：
1. 给元素添加转换属性 transform
2. 属性值为 rotate(deg角度) 如 transform:rotate(30deg) 顺时针方向旋转30度,逆时针旋转为负数.默认旋转的中心点是元素的中心点,可通过transform-origin属性来更改元素旋转的中心点.
transform-origin:**50% 50%;** 默认值 元素的中心位置 百分比是相对于自身的宽度和高度
transform-origin:**top left;** 左上角 和 transform-origin：0 0;相同
transform-origin:**50px 50px;** 距离左上角 50px 50px 的位置
transform-origin：**0**; 只写一个值的时候 第二个值默认为 50%;
##### 3.scale
使用scale步骤：
1. 给元素添加转换属性 transform
2. 转换的属性值为 scale(宽的倍数,高的倍数) 如 宽变为两倍，高变为3倍 transform:scale(2,3) transform:scale(2) 只写一个参数 第二个参数则和第一个参数一样 相当于 scale(2,2) transform:scale(0.5,0.5) 缩小
demo: http://127.0.0.1:5500/transformDemo.html
## 二.transition(过渡)
#### transition包含4个属性值: transition-property(执行变换的属性), transition-duration(变换延续的时间),transition-timing-function(变换的速度变化),transition-delay(变换延迟时间)
##### 1.transition-property
`transition-property: none || all || indent;`
none: 没有属性改变会获得过渡效果；
all: 任何属性改变都将获得过渡效果,**也是其默认值**；
indent: 定义应用过渡效果的 CSS 属性名称，列表以逗号分隔。
##### 2.transition-duration
`transition-duration: time;`
`transition-duration`是用来指定元素转换过程的持续时间，取值time为数字，单位为s（秒）或者ms(毫秒)，其默认值是0
##### 3.transition-timing-function
```
transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
```
transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个属性值：
1、ease：（逐渐变慢）默认值
2、linear：（匀速）
3、ease-in：(加速)
4、ease-out：（减速）
5、ease-in-out：（加速然后减速）
6、cubic-bezier：贝塞尔曲线（该值允许你去自定义一个时间曲线）
##### 4.transition-delay
```
transition-delay ： <time>
```
transition-delay 用来指定一个动画开始执行的时间,取值time为数字，单位为s（秒）或者ms(毫秒)，其默认值是0
demo: http://127.0.0.1:5500/transitionDemo.html
## 三.animation(动画)
过渡 只能看到一次变化过程 如宽度100px变化到200px
**动画 可以设置变化的次数 甚至是无数次**
使用animation步骤：
1. 在css中使用关键字**@keyframes+动画名称+{ }**声明动画函数
2. 在元素中调用动画
```
<style>
div{
width: 40px;
height: 40px;
border-radius: 50%;
background: #000;
animation: move 2s linear 5 alternate both;
}
@keyframes move{
0%{
transform: translate(0,0);
}
100%{
transform: translate(200px,0);
}
}
</style>
```
animation有8个属性:
| 属性 | 描述 |
| :------------------------ | :----------------------------------------------------------- |
| animation-duration | 指定动画完成一个周期所需要时间，单位秒（s）或毫秒（ms），默认是 0。 |
| animation-timing-function | 指定动画计时函数，即动画的速度曲线，默认是 "ease"。常见属性值有：`linear`匀速、`ease低速开始,然后加快,在结束前变慢`、`ease-in`低速开始、`ease-out低速结束`、`ease-in-out`低速开始和结束 |
| animation-delay | 指定动画延迟时间，即动画何时开始，默认是 0。也可以为负数,负延迟表示动画仿佛开始前就已经运行过了那么长时间。 |
| animation-iteration-count | 指定动画播放的次数，默认是 1。无限播放时使用 `infinite` |
| animation-direction | 指定动画播放的方向。默认是 normal。除了默认值,还有另外 3 个属性值：reverse反向播放, alternate正向和反向交叉进行, alternate-reverse反向和正向交叉进行. |
| animation-fill-mode | 指定动画填充模式。默认是 none。除了默认值 `none` 外，还有另外 3 个值：forwards动画完成后，元素状态保持为最后一帧的状态, backwards有动画延迟时，动画开始前，元素状态保持为第一帧的状态, both二者效果都有. |
| animation-play-state | 指定动画播放状态，正在运行running或暂停paused。默认是 running。 |
| animation-name | 指定 @keyframes 动画的名称。 |
属性值在`animation`中的简写方式:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
demo: http://127.0.0.1:5500/animationDemo.html
http://127.0.0.1:5500/hotDemo.html
动画库: https://landing.ant.design/
https://daneden.github.io/animate.css