动画
实现步骤
- 定义动画
@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使用 |