目标:使用animation添加动画效果
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元:帧或动画帧
一.基础(使用from-to或百分比)
**代码块**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画实现步骤</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
/* 使用动画 */
animation: change 2s;
}
/* 一. 定义动画:从200变大到600 */
@keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
}
/* 二. 定义动画:200 到 500*300 到 800*500 */
/* 百分比指的是动画总时长的占比 */
@keyframes change {
0% {
width: 200px;
}
50% {
width: 500px;
height: 300px;
}
100% {
width: 800px;
height: 500px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
二.使用animation属性控制动画过程
1.合并写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation复合属性</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
/* linear是匀速的速度曲线 */
/* animation: change 1s linear; */
/* step()分步动画,steps(3) 一个动画分三步执行 */
/* 3: 重复3次播放 */
/* animation:名称(change) 时长(1s) 速度曲线(分步—steps(3)) 延迟时间(1s) 重复次数(3) */
/* animation: change 1s steps(3) 1s 3; */
/* 无限循环 */
/* animation: change 1s infinite alternate; */
/* 动画停留状态 */
/* 默认值, 动画停留在最初的状态 */
/* animation: change 1s backwards; */
/* 动画停留在结束状态 */
animation: change 1s forwards;
}
@keyframes change {
from {