EASING / 147
Elastic in out
前後で弾み、中央を抜ける
始点側で揺れをため、中央を通り、終点側で揺れを収めます。
実際のHTML・CSSで描かれた見本です。
ひとつ試すなら
どこが変わるかを観察して、似た表現と見比べてみよう。
こんなときに
伸び縮みする素材や、ばねらしい動きを強調するとき。
仕組みと使い方
Elastic系の数式を細かい折れ線で近似しています。動きの両側に余白を確保してください。
対応状況は使用する機能と端末により異なります。公式資料も参照してください。
表現名には通称や説明のための名称を含みます。デモと掲載コードはこの図鑑のオリジナルです。作者について
実装コードを見る
<div class="demo"></div>
<style>
.demo {
width: 85px; height: 85px; border-radius: 50%;
color: #30323c;
background: #30323c;
animation: easing-elastic-in-out 1800ms linear(0 0%, 0.000217 0.83333%, 0.000367 1.66667%, 0.000529 2.5%, 0.000693 3.33333%, 0.000847 4.16667%, 0.000977 5%, 0.001067 5.83333%, 0.0011 6.66667%, 0.001058 7.5%, 0.000926 8.33333%, 0.000689 9.16667%, 0.000339 10%, -0.000127 10.83333%, -0.000706 11.66667%, -0.001381 12.5%, -0.002128 13.33333%, -0.002908 14.16667%, -0.003671 15%, -0.004355 15.83333%, -0.004888 16.66667%, -0.005191 17.5%, -0.005181 18.33333%, -0.004776 19.16667%, -0.003906 20%, -0.002515 20.83333%, -0.000572 21.66667%, 0.001919 22.5%, 0.004912 23.33333%, 0.008313 24.16667%, 0.011969 25%, 0.015673 25.83333%, 0.019156 26.66667%, 0.022097 27.5%, 0.024135 28.33333%, 0.024879 29.16667%, 0.023939 30%, 0.020947 30.83333%, 0.015595 31.66667%, 0.007674 32.5%, -0.002884 33.33333%, -0.01597 34.16667%, -0.03125 35%, -0.048142 35.83333%, -0.065791 36.66667%, -0.083058 37.5%, -0.098542 38.33333%, -0.110609 39.16667%, -0.117462 40%, -0.117225 40.83333%, -0.108076 41.66667%, -0.088388 42.5%, -0.056909 43.33333%, -0.01295 44.16667%, 0.043412 45%, 0.111146 45.83333%, 0.188093 46.66667%, 0.270838 47.5%, 0.354638 48.33333%, 0.433443 49.16667%, 0.5 50%, 0.566557 50.83333%, 0.645362 51.66667%, 0.729162 52.5%, 0.811907 53.33333%, 0.888854 54.16667%, 0.956588 55%, 1.01295 55.83333%, 1.056909 56.66667%, 1.088388 57.5%, 1.108076 58.33333%, 1.117225 59.16667%, 1.117462 60%, 1.110609 60.83333%, 1.098542 61.66667%, 1.083058 62.5%, 1.065791 63.33333%, 1.048142 64.16667%, 1.03125 65%, 1.01597 65.83333%, 1.002884 66.66667%, 0.992326 67.5%, 0.984405 68.33333%, 0.979053 69.16667%, 0.976061 70%, 0.975121 70.83333%, 0.975865 71.66667%, 0.977903 72.5%, 0.980844 73.33333%, 0.984327 74.16667%, 0.988031 75%, 0.991687 75.83333%, 0.995088 76.66667%, 0.998081 77.5%, 1.000572 78.33333%, 1.002515 79.16667%, 1.003906 80%, 1.004776 80.83333%, 1.005181 81.66667%, 1.005191 82.5%, 1.004888 83.33333%, 1.004355 84.16667%, 1.003671 85%, 1.002908 85.83333%, 1.002128 86.66667%, 1.001381 87.5%, 1.000706 88.33333%, 1.000127 89.16667%, 0.999661 90%, 0.999311 90.83333%, 0.999074 91.66667%, 0.998942 92.5%, 0.9989 93.33333%, 0.998933 94.16667%, 0.999023 95%, 0.999153 95.83333%, 0.999307 96.66667%, 0.999471 97.5%, 0.999633 98.33333%, 0.999783 99.16667%, 1 100%) infinite both;
}
@keyframes easing-elastic-in-out {
0% { transform: translateX(-80px); }
100% { transform: translateX(80px); }
}
@media (prefers-reduced-motion: reduce) {
.demo { animation: none; }
}
</style>