EASING / 144
Bounce in out
跳ねて出発、跳ねて着地
始点付近の小さな跳ねから出発し、終点付近でも跳ね返ります。
実際のHTML・CSSで描かれた見本です。
ひとつ試すなら
どこが変わるかを観察して、似た表現と見比べてみよう。
こんなときに
始まりと終わりの両方に、跳ねる感触をつけたいとき。
仕組みと使い方
Bounce inとBounce outを半分ずつつないだ曲線を、CSS linear()で近似しています。
対応状況は使用する機能と端末により異なります。公式資料も参照してください。
表現名には通称や説明のための名称を含みます。デモと掲載コードはこの図鑑のオリジナルです。作者について
実装コードを見る
<div class="demo"></div>
<style>
.demo {
width: 85px; height: 85px; border-radius: 50%;
color: #30323c;
background: #30323c;
animation: easing-bounce-in-out 1800ms linear(0 0%, 0.004679 0.83333%, 0.007257 1.66667%, 0.007812 2.27273%, 0.007734 2.5%, 0.006111 3.33333%, 0.002387 4.16667%, 0 4.54545%, 0.005938 5%, 0.0152 5.83333%, 0.022361 6.66667%, 0.027422 7.5%, 0.030382 8.33333%, 0.03125 9.09091%, 0.031241 9.16667%, 0.03 10%, 0.026658 10.83333%, 0.021215 11.66667%, 0.013672 12.5%, 0.004028 13.33333%, 0 13.63636%, 0.014158 14.16667%, 0.034687 15%, 0.053116 15.83333%, 0.069445 16.66667%, 0.083672 17.5%, 0.095799 18.33333%, 0.105825 19.16667%, 0.11375 20%, 0.119575 20.83333%, 0.123299 21.66667%, 0.124922 22.5%, 0.125 22.72727%, 0.124444 23.33333%, 0.121866 24.16667%, 0.117188 25%, 0.110408 25.83333%, 0.101528 26.66667%, 0.090547 27.5%, 0.077465 28.33333%, 0.062283 29.16667%, 0.045 30%, 0.025616 30.83333%, 0.004132 31.66667%, 0 31.81818%, 0.036797 32.5%, 0.079861 33.33333%, 0.120825 34.16667%, 0.159687 35%, 0.19645 35.83333%, 0.231111 36.66667%, 0.263672 37.5%, 0.294132 38.33333%, 0.322491 39.16667%, 0.34875 40%, 0.372908 40.83333%, 0.394965 41.66667%, 0.414922 42.5%, 0.432778 43.33333%, 0.448533 44.16667%, 0.462188 45%, 0.473741 45.83333%, 0.483194 46.66667%, 0.490547 47.5%, 0.495799 48.33333%, 0.49895 49.16667%, 0.5 50%, 0.50105 50.83333%, 0.504201 51.66667%, 0.509453 52.5%, 0.516806 53.33333%, 0.526259 54.16667%, 0.537813 55%, 0.551467 55.83333%, 0.567222 56.66667%, 0.585078 57.5%, 0.605035 58.33333%, 0.627092 59.16667%, 0.65125 60%, 0.677509 60.83333%, 0.705868 61.66667%, 0.736328 62.5%, 0.768889 63.33333%, 0.80355 64.16667%, 0.840313 65%, 0.879175 65.83333%, 0.920139 66.66667%, 0.963203 67.5%, 1 68.18182%, 0.995868 68.33333%, 0.974384 69.16667%, 0.955 70%, 0.937717 70.83333%, 0.922535 71.66667%, 0.909453 72.5%, 0.898472 73.33333%, 0.889592 74.16667%, 0.882813 75%, 0.878134 75.83333%, 0.875556 76.66667%, 0.875 77.27273%, 0.875078 77.5%, 0.876701 78.33333%, 0.880425 79.16667%, 0.88625 80%, 0.894175 80.83333%, 0.904201 81.66667%, 0.916328 82.5%, 0.930555 83.33333%, 0.946884 84.16667%, 0.965313 85%, 0.985842 85.83333%, 1 86.36364%, 0.995972 86.66667%, 0.986328 87.5%, 0.978785 88.33333%, 0.973342 89.16667%, 0.97 90%, 0.968759 90.83333%, 0.96875 90.90909%, 0.969618 91.66667%, 0.972578 92.5%, 0.977639 93.33333%, 0.9848 94.16667%, 0.994062 95%, 1 95.45455%, 0.997613 95.83333%, 0.993889 96.66667%, 0.992266 97.5%, 0.992188 97.72727%, 0.992743 98.33333%, 0.995321 99.16667%, 1 100%) infinite both;
}
@keyframes easing-bounce-in-out {
0% { transform: translateX(-80px); }
100% { transform: translateX(80px); }
}
@media (prefers-reduced-motion: reduce) {
.demo { animation: none; }
}
</style>