一、需求
针对动画的百分比过度情况制作范例演示。
二、源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Move div-By_Even-2022-4-29</title>
<style>
.testcls {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: myfirst 5s ease-out infinite alternate;
}
@keyframes myfirst {
0% {
background: red;
left: 0px;
top: 0px;
}
25% {
background: yellow;
left: 200px;
top: 0px;
}
50% {
background: blue;
left: 200px;
top: 200px;
}
75% {
background: green;
left: 0px;
top: 200px;
}
100% {
background: red;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<p>本例在 Internet Explorer 中无效。</p>
<div class="testcls"></div>
</body>
</html>三、总结
注意当处于线性动画时，四段动画为连续线性。当处于ease-in/out/in-out等动画时，该动画是以每段为分隔，即每一段都执行一遍ease-in/out/in-out。