EASING / 143
Bounce out
着地して、跳ね返る
終点に届いた後、小さな跳ね返りを繰り返して収まります。
実際のHTML・CSSで描かれた見本です。
ひとつ試すなら
どこが変わるかを観察して、似た表現と見比べてみよう。
こんなときに
ボールやキャラクターなど、着地を感じさせたいとき。
仕組みと使い方
Bounce系の曲線を細かく採った点で近似し、CSS linear()で結んでいます。物理計算ではありません。
対応状況は使用する機能と端末により異なります。公式資料も参照してください。
表現名には通称や説明のための名称を含みます。デモと掲載コードはこの図鑑のオリジナルです。作者について
実装コードを見る
<div class="demo"></div>
<style>
.demo {
width: 85px; height: 85px; border-radius: 50%;
color: #30323c;
background: #30323c;
animation: easing-bounce-out 1800ms linear(0 0%, 0.000525 0.83333%, 0.002101 1.66667%, 0.004727 2.5%, 0.008403 3.33333%, 0.013129 4.16667%, 0.018906 5%, 0.025733 5.83333%, 0.033611 6.66667%, 0.042539 7.5%, 0.052517 8.33333%, 0.063546 9.16667%, 0.075625 10%, 0.088754 10.83333%, 0.102934 11.66667%, 0.118164 12.5%, 0.134444 13.33333%, 0.151775 14.16667%, 0.170156 15%, 0.189588 15.83333%, 0.21007 16.66667%, 0.231602 17.5%, 0.254184 18.33333%, 0.277817 19.16667%, 0.3025 20%, 0.328233 20.83333%, 0.355017 21.66667%, 0.382852 22.5%, 0.411736 23.33333%, 0.441671 24.16667%, 0.472656 25%, 0.504692 25.83333%, 0.537778 26.66667%, 0.571914 27.5%, 0.607101 28.33333%, 0.643338 29.16667%, 0.680625 30%, 0.718963 30.83333%, 0.758351 31.66667%, 0.798789 32.5%, 0.840278 33.33333%, 0.882817 34.16667%, 0.926406 35%, 0.971046 35.83333%, 1 36.36364%, 0.991736 36.66667%, 0.969727 37.5%, 0.948767 38.33333%, 0.928858 39.16667%, 0.91 40%, 0.892192 40.83333%, 0.875434 41.66667%, 0.859727 42.5%, 0.84507 43.33333%, 0.831463 44.16667%, 0.818906 45%, 0.8074 45.83333%, 0.796944 46.66667%, 0.787539 47.5%, 0.779184 48.33333%, 0.771879 49.16667%, 0.765625 50%, 0.760421 50.83333%, 0.756267 51.66667%, 0.753164 52.5%, 0.751111 53.33333%, 0.750109 54.16667%, 0.75 54.54545%, 0.750156 55%, 0.751254 55.83333%, 0.753403 56.66667%, 0.756602 57.5%, 0.760851 58.33333%, 0.76615 59.16667%, 0.7725 60%, 0.7799 60.83333%, 0.788351 61.66667%, 0.797852 62.5%, 0.808403 63.33333%, 0.820004 64.16667%, 0.832656 65%, 0.846358 65.83333%, 0.861111 66.66667%, 0.876914 67.5%, 0.893767 68.33333%, 0.911671 69.16667%, 0.930625 70%, 0.950629 70.83333%, 0.971684 71.66667%, 0.993789 72.5%, 1 72.72727%, 0.991944 73.33333%, 0.981775 74.16667%, 0.972656 75%, 0.964588 75.83333%, 0.957569 76.66667%, 0.951602 77.5%, 0.946684 78.33333%, 0.942817 79.16667%, 0.94 80%, 0.938234 80.83333%, 0.937517 81.66667%, 0.9375 81.81818%, 0.937852 82.5%, 0.939236 83.33333%, 0.941671 84.16667%, 0.945156 85%, 0.949692 85.83333%, 0.955278 86.66667%, 0.961914 87.5%, 0.969601 88.33333%, 0.978338 89.16667%, 0.988125 90%, 0.998963 90.83333%, 1 90.90909%, 0.995226 91.66667%, 0.990977 92.5%, 0.987778 93.33333%, 0.985629 94.16667%, 0.984531 95%, 0.984375 95.45455%, 0.984484 95.83333%, 0.985486 96.66667%, 0.987539 97.5%, 0.990642 98.33333%, 0.994796 99.16667%, 1 100%) infinite both;
}
@keyframes easing-bounce-out {
0% { transform: translateX(-80px); }
100% { transform: translateX(80px); }
}
@media (prefers-reduced-motion: reduce) {
.demo { animation: none; }
}
</style>