ease-out
from animation-timing-function
ease-in-out
左：ease-out 右：linear
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/issac-37765679/ease-out/ease-out.svghttps://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/issac-37765679/ease-out/linear.svg
code:ease-out.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" buffered-rendering="static" width="200px" height="200px" viewBox="0,0,10,10">
<style>
@keyframes scaleAndMoveAnimation {
0% { transform: translate(0, 0); }
50% { transform: translate(5px, 5px); }
100% { transform: translate(10px, 10px); }
}
#icon {
animation: scaleAndMoveAnimation 2s ease-out infinite;
transform-origin: top left;
}
</style>
<rect x="0" y="0" width="100%" height="100%" fill="#ffffff" />
<g id="icon">
<rect x="1" y="1" width="1" height="1" fill="#5c89c0"/>
<rect x="2" y="1" width="1" height="1" fill="#9cbce3"/>
<rect x="1" y="2" width="1" height="1" fill="#e4d7b5"/>
<rect x="2" y="2" width="1" height="1" fill="#6e733b"/>
</g>
</svg>
code:linear.svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" buffered-rendering="static" width="200px" height="200px" viewBox="0,0,10,10">
<style>
@keyframes scaleAndMoveAnimation {
0% { transform: translate(0, 0); }
50% { transform: translate(5px, 5px); }
100% { transform: translate(10px, 10px); }
}
#icon {
animation: scaleAndMoveAnimation 2s linear infinite;
transform-origin: top left;
}
</style>
<rect x="0" y="0" width="100%" height="100%" fill="#ffffff" />
<g id="icon">
<rect x="1" y="1" width="1" height="1" fill="#5c89c0"/>
<rect x="2" y="1" width="1" height="1" fill="#9cbce3"/>
<rect x="1" y="2" width="1" height="1" fill="#e4d7b5"/>
<rect x="2" y="2" width="1" height="1" fill="#6e733b"/>
</g>
</svg>