- 0%是动画的开始,100%是动画的结束,这样的规则就是动画序列。
- 或者用关键词 from 和 to,等同于 0% 和 100%。
- 可以改变任意多的样式、任意多的次数,而不是仅限于0% 和 100%两个时间点。
- 关键帧里面的百分比就是总的时间的划分。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes movearound {
0% {
/* 开始 */
transform: translate(0, 0);
}
25% {
/* 总时间的百分之25%时 */
transform: translate(1000px, 0);
}
50% {
/* 总时间的百分之50%时 */
transform: translate(1000px, 500px);
}
75% {
/* 总时间的百分之75%时 */
transform: translate(0, 500px);
}
100% {
/* 总时间的百分之100%时 */
transform: translate(0, 0);
}
}
div {
width: 200px;
height: 200px;
background-color: lightsalmon;
border-radius: 50%;
margin-left: 100px;
animation-name: movearound;
animation-duration: 8s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在动画各关键帧上的位置: