1. 需要
アニメーションのパーセンテージ遷移のサンプル デモンストレーションを作成します。
2. ソースコード
<!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>3. まとめ
線形アニメーションでは、アニメーションの 4 つのセグメントが連続した線形であることに注意してください。easy-in/out/in-out などのアニメーションでは、アニメーションはセグメントごとに区切られており、各セグメントで easy-in/out/in-out が 1 回実行されます。