<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>动画</title>
<style type="text/css">
.box{
width: 300px;
height: 500px;
border: 5px solid orange;
font-size: 36px;
color: black;
line-height: 200px;
/* step2:绑定动画
animation:动画名称 持续时间 次数 速度 延迟
infinite:无限次
/*from: 开始帧
to:结束帧
百分比：时间节点
*/
animation:changge 10s infinite linear 1s;
}
/* 动画:
step1:创建关键帧 @keyframes 动画名称{
from{}
to{}
}
*/
@keyframes changge {
0%,15%{width: 300px;
height: 500px;
border: 5px solid orange;
}
20%,40%{/* 某种状态持续一段时间 */
transform: rotate(0);
background-color: aqua;
/* 开始帧 */ }
45%,65% {
width: 800px; /* 结束帧 */
transform: rotate(180deg);
background-color: pink;
}
60%{
width: 1200px;
height: 200px;
background-color: blue;
}
100%{
width: 300px;
height: 300px;
background-color: aquamarine;
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box">这是cp</div>
</body>
</html>