animation-timing-function
rotateの減速表現ってどうやるんだろcFQ2f7LRuLYP.icon 徐々〜に止めていく感じ
停止線で一旦停止、少ししてから再度発進みたいなことできないか？ takker.icon
この辺がわからんと言えば無言で返してくれる人のいるあたたかさcFQ2f7LRuLYP.icon
よんでみよcFQ2f7LRuLYP.icon
https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/issac-37765679/animation-timing-function/s.svg
code:s.svg
<style>
@keyframes translateAnimation {
0% { transform: translate(-400px, 0px); }
50% { transform: translate(0px, 0px); }
100% { transform: translate(400px, 0px); }
}
animation: translateAnimation 3s ease-in-out infinite reverse;
transform-origin: top left; /* Specify the origin of skew */
}
</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>
仮にlinearからease-in-outにしたが、余り違いがわからん
いやこれ設定がまちがってただけだったわ
cubic-bezier(0.25, 0.1, 0.25, 1.0) と同じで、既定値であり、アニメーションの中央に向けて変化量が増加し、最後に向けて減少します。
cubic-bezier(0.42, 0, 0.58, 1.0) と同じで、プロパティのアニメーションはゆっくり変化し、速度を上げ、また速度を落とします。
アニメーションの終了時に最後のジャンプが発生するように、右連続関数を表します。