EASING / 142
Bounce in
小さな跳ねから、駆け出す
始点付近で小さく跳ね、跳ね幅を広げてから終点へ進みます。
実際のHTML・CSSで描かれた見本です。
ひとつ試すなら
どこが変わるかを観察して、似た表現と見比べてみよう。
こんなときに
小さな跳ね返りを、動き始めの予備動作に使うとき。
仕組みと使い方
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 1800ms linear(0 0%, 0.005204 0.83333%, 0.009358 1.66667%, 0.012461 2.5%, 0.014514 3.33333%, 0.015516 4.16667%, 0.015625 4.54545%, 0.015469 5%, 0.014371 5.83333%, 0.012222 6.66667%, 0.009023 7.5%, 0.004774 8.33333%, 0 9.09091%, 0.001037 9.16667%, 0.011875 10%, 0.021662 10.83333%, 0.030399 11.66667%, 0.038086 12.5%, 0.044722 13.33333%, 0.050308 14.16667%, 0.054844 15%, 0.058329 15.83333%, 0.060764 16.66667%, 0.062148 17.5%, 0.0625 18.18182%, 0.062483 18.33333%, 0.061766 19.16667%, 0.06 20%, 0.057183 20.83333%, 0.053316 21.66667%, 0.048398 22.5%, 0.042431 23.33333%, 0.035412 24.16667%, 0.027344 25%, 0.018225 25.83333%, 0.008056 26.66667%, 0 27.27273%, 0.006211 27.5%, 0.028316 28.33333%, 0.049371 29.16667%, 0.069375 30%, 0.088329 30.83333%, 0.106233 31.66667%, 0.123086 32.5%, 0.138889 33.33333%, 0.153642 34.16667%, 0.167344 35%, 0.179996 35.83333%, 0.191597 36.66667%, 0.202148 37.5%, 0.211649 38.33333%, 0.2201 39.16667%, 0.2275 40%, 0.23385 40.83333%, 0.239149 41.66667%, 0.243398 42.5%, 0.246597 43.33333%, 0.248746 44.16667%, 0.249844 45%, 0.25 45.45455%, 0.249891 45.83333%, 0.248889 46.66667%, 0.246836 47.5%, 0.243733 48.33333%, 0.239579 49.16667%, 0.234375 50%, 0.228121 50.83333%, 0.220816 51.66667%, 0.212461 52.5%, 0.203056 53.33333%, 0.1926 54.16667%, 0.181094 55%, 0.168537 55.83333%, 0.15493 56.66667%, 0.140273 57.5%, 0.124566 58.33333%, 0.107808 59.16667%, 0.09 60%, 0.071142 60.83333%, 0.051233 61.66667%, 0.030273 62.5%, 0.008264 63.33333%, 0 63.63636%, 0.028954 64.16667%, 0.073594 65%, 0.117183 65.83333%, 0.159722 66.66667%, 0.201211 67.5%, 0.241649 68.33333%, 0.281037 69.16667%, 0.319375 70%, 0.356662 70.83333%, 0.392899 71.66667%, 0.428086 72.5%, 0.462222 73.33333%, 0.495308 74.16667%, 0.527344 75%, 0.558329 75.83333%, 0.588264 76.66667%, 0.617148 77.5%, 0.644983 78.33333%, 0.671767 79.16667%, 0.6975 80%, 0.722183 80.83333%, 0.745816 81.66667%, 0.768398 82.5%, 0.78993 83.33333%, 0.810412 84.16667%, 0.829844 85%, 0.848225 85.83333%, 0.865556 86.66667%, 0.881836 87.5%, 0.897066 88.33333%, 0.911246 89.16667%, 0.924375 90%, 0.936454 90.83333%, 0.947483 91.66667%, 0.957461 92.5%, 0.966389 93.33333%, 0.974267 94.16667%, 0.981094 95%, 0.986871 95.83333%, 0.991597 96.66667%, 0.995273 97.5%, 0.997899 98.33333%, 0.999475 99.16667%, 1 100%) infinite both;
}
@keyframes easing-bounce-in {
0% { transform: translateX(-80px); }
100% { transform: translateX(80px); }
}
@media (prefers-reduced-motion: reduce) {
.demo { animation: none; }
}
</style>