---
title: 动画
date: 2024-06-06T23:51:00Z
tags: []
---


## 动画的基本使用

### 定义关键帧

1. 简单定义

    ```css
    @keyframes 动画名{
    from{
        属性:值
    }
    to{
        属性:值
    }
    }
    ```

2. 完整定义

```css
@keyframes 动画名{
    0%{
        属性:值
    }
    60%{
        属性:值
    }
    100%{
        属性:值
    }
}
```

### 给元素应用动画

1. ​`animation-name:`​给元素设置具体的动画(具体的关键帧)
2. ​`animation-duration`​:设置动画所需时间
3. ​`animation-delay`​:设置动画延迟

## 其他属性

### 动画类型

​`animation-timing-function`​

1. ​`ease`​:平滑过渡 --默认值
2. ​`linear`​:线性过渡
3. ​`ease-in`:慢 -> 快
4. ​`ease-out`​:快 -> 慢
5. ​`ease-in-out`​:慢 -> 快 ->慢
6. ​`step-start`​:等同于steps(1,start)
7. ​`step-end`​:等同于steps(1,end)
8. ​`steps(integer,?)`​:接收两个参数的步进函数,第一个参数必须为正整数,指定的步伐.第二个参数可选值是start或end,指定每一步发值发生变化的时间点.第二个参数默认值为end.
9. ​`cubic-bezie(number,number,number,number)`​:特定的贝塞尔曲线类型

### 动画的播放次数

​`animation-iteration-count`​  
​`number`​:动画循环次数  
​`infinite`​:无限循环

### 动画未播放的状态

​`animation-fill-mode`​  
​`forwards`​:设置对象状态未动画结束时的状态  
​`backwards`​:设置对象状态未动画开始时的状态

### 动画的播放状态

​`animation-play-state`​  
​`running`​:运动(默认)  
​`paused`​:暂停

### 复合属性

只设置一个时间表示`duration`​,两个时间分别是:`duration`​和`delay`​,其他属性没有数量和顺序要求  
​`animation-play-state`​一般单独使用
