EASING / 145
Elastic in
揺れをためて、飛び出す
始点の前後で揺れを大きくし、最後に終点へ飛び出します。
実際のHTML・CSSで描かれた見本です。
ひとつ試すなら
どこが変わるかを観察して、似た表現と見比べてみよう。
こんなときに
引き絞るような動きや、柔らかい物体の出発に。
仕組みと使い方
Elastic outを反転した曲線を、CSS linear()で近似しています。逆方向への移動に備えて余白を確保します。
対応状況は使用する機能と端末により異なります。公式資料も参照してください。
表現名には通称や説明のための名称を含みます。デモと掲載コードはこの図鑑のオリジナルです。作者について
実装コードを見る
<div class="demo"></div>
<style>
.demo {
width: 85px; height: 85px; border-radius: 50%;
color: #30323c;
background: #30323c;
animation: easing-elastic-in 1800ms linear(0 0%, -0.000354 0.83333%, -0.00019 1.66667%, 0 2.5%, 0.000214 3.33333%, 0.000446 4.16667%, 0.000691 5%, 0.000941 5.83333%, 0.001188 6.66667%, 0.001422 7.5%, 0.001635 8.33333%, 0.001815 9.16667%, 0.001953 10%, 0.002038 10.83333%, 0.00206 11.66667%, 0.002011 12.5%, 0.001885 13.33333%, 0.001676 14.16667%, 0.001381 15%, 0.001001 15.83333%, 0.000538 16.66667%, 0 17.5%, -0.000604 18.33333%, -0.001261 19.16667%, -0.001953 20%, -0.00266 20.83333%, -0.003359 21.66667%, -0.004023 22.5%, -0.004625 23.33333%, -0.005135 24.16667%, -0.005524 25%, -0.005764 25.83333%, -0.005827 26.66667%, -0.005689 27.5%, -0.005332 28.33333%, -0.00474 29.16667%, -0.003906 30%, -0.002831 30.83333%, -0.001523 31.66667%, 0 32.5%, 0.001709 33.33333%, 0.003567 34.16667%, 0.005524 35%, 0.007524 35.83333%, 0.0095 36.66667%, 0.011379 37.5%, 0.013081 38.33333%, 0.014524 39.16667%, 0.015625 40%, 0.016303 40.83333%, 0.016481 41.66667%, 0.016092 42.5%, 0.015081 43.33333%, 0.013407 44.16667%, 0.011049 45%, 0.008007 45.83333%, 0.004307 46.66667%, 0 47.5%, -0.004834 48.33333%, -0.010088 49.16667%, -0.015625 50%, -0.021282 50.83333%, -0.026871 51.66667%, -0.032184 52.5%, -0.036998 53.33333%, -0.04108 54.16667%, -0.044194 55%, -0.046111 55.83333%, -0.046615 56.66667%, -0.045515 57.5%, -0.042654 58.33333%, -0.037919 59.16667%, -0.03125 60%, -0.022647 60.83333%, -0.012182 61.66667%, 0 62.5%, 0.013674 63.33333%, 0.028534 64.16667%, 0.044194 65%, 0.060193 65.83333%, 0.076001 66.66667%, 0.09103 67.5%, 0.104646 68.33333%, 0.116192 69.16667%, 0.125 70%, 0.130421 70.83333%, 0.131846 71.66667%, 0.128735 72.5%, 0.120644 73.33333%, 0.107252 74.16667%, 0.088388 75%, 0.064057 75.83333%, 0.034456 76.66667%, 0 77.5%, -0.038676 78.33333%, -0.080706 79.16667%, -0.125 80%, -0.170252 80.83333%, -0.214964 81.66667%, -0.257471 82.5%, -0.295984 83.33333%, -0.32864 84.16667%, -0.353553 85%, -0.368886 85.83333%, -0.372917 86.66667%, -0.364119 87.5%, -0.341234 88.33333%, -0.303355 89.16667%, -0.25 90%, -0.181179 90.83333%, -0.097456 91.66667%, 0 92.5%, 0.109391 93.33333%, 0.228272 94.16667%, 0.353553 95%, 0.481546 95.83333%, 0.60801 96.66667%, 0.728238 97.5%, 0.837171 98.33333%, 0.929535 99.16667%, 1 100%) infinite both;
}
@keyframes easing-elastic-in {
0% { transform: translateX(-80px); }
100% { transform: translateX(80px); }
}
@media (prefers-reduced-motion: reduce) {
.demo { animation: none; }
}
</style>