HTML(30)——动画
动画
实现步骤
- 定义动画
@keyframes 动画名称{
from{}
to{}
}
@keyframes 动画名称{
0%{}
10%{}
....
100%{}
}
2.使用动画
animation:动画名称 动画花费时间;
示例：盒子的宽度从200变到400px，两个状态一般用from to的形式
<style>.box {width: 200px;height: 100px;background-color: pink;animation: change 2s;}@keyframes change {from {width: 200px;}to {width: 400px;}}</style>
</head><body><div class="box"></div>
</body>多个状态变化：
<style>.box {width: 200px;height: 100px;background-color: pink;animation: change 2s;}@keyframes change {10% {width: 200px;}50% {width: 400px;}100% {width: 800px;}}</style>
</head><body><div class="box"></div>
</body>animation属性
animation是复合属性，包括：
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
注意：
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
同时也可以拆分成多个属性
| 属性 | 作用 | 取值 |
|---|---|---|
| animation-name | 动画名称 | |
| animation | 动画时长 | |
| animation | 延迟时间 | |
| animation | 动画执行完毕时状态 | forwards:最后一帧状态 backwards:第一帧状态 |
| animation | 速度曲线 | step(数字)：逐帧动画 |
| animation | 重复次数 | infinite为无限循环 |
| animation | 动画执行方向 | alternate为反向 |
| animation | 暂停动画 | paused为暂停，通常配合hover使用 |