EASING / 146
Elastic out
ばねのように、揺れて収まる
終点の前後を行き来しながら、揺れ幅を小さくして止まります。
実際のHTML・CSSで描かれた見本です。
ひとつ試すなら
どこが変わるかを観察して、似た表現と見比べてみよう。
こんなときに
柔らかい質感や、遊び心のある操作反応に。
仕組みと使い方
Elastic系の曲線をCSS linear()の折れ線で近似しています。ばねの物理シミュレーションではありません。
対応状況は使用する機能と端末により異なります。公式資料も参照してください。
表現名には通称や説明のための名称を含みます。デモと掲載コードはこの図鑑のオリジナルです。作者について
実装コードを見る
<div class="demo"></div>
<style>
.demo {
width: 85px; height: 85px; border-radius: 50%;
color: #30323c;
background: #30323c;
animation: easing-elastic-out 1800ms linear(0 0%, 0.070465 0.83333%, 0.162829 1.66667%, 0.271762 2.5%, 0.39199 3.33333%, 0.518454 4.16667%, 0.646447 5%, 0.771728 5.83333%, 0.890609 6.66667%, 1 7.5%, 1.097456 8.33333%, 1.181179 9.16667%, 1.25 10%, 1.303355 10.83333%, 1.341234 11.66667%, 1.364119 12.5%, 1.372917 13.33333%, 1.368886 14.16667%, 1.353553 15%, 1.32864 15.83333%, 1.295984 16.66667%, 1.257471 17.5%, 1.214964 18.33333%, 1.170252 19.16667%, 1.125 20%, 1.080706 20.83333%, 1.038676 21.66667%, 1 22.5%, 0.965544 23.33333%, 0.935943 24.16667%, 0.911612 25%, 0.892748 25.83333%, 0.879356 26.66667%, 0.871265 27.5%, 0.868154 28.33333%, 0.869579 29.16667%, 0.875 30%, 0.883808 30.83333%, 0.895354 31.66667%, 0.90897 32.5%, 0.923999 33.33333%, 0.939807 34.16667%, 0.955806 35%, 0.971466 35.83333%, 0.986326 36.66667%, 1 37.5%, 1.012182 38.33333%, 1.022647 39.16667%, 1.03125 40%, 1.037919 40.83333%, 1.042654 41.66667%, 1.045515 42.5%, 1.046615 43.33333%, 1.046111 44.16667%, 1.044194 45%, 1.04108 45.83333%, 1.036998 46.66667%, 1.032184 47.5%, 1.026871 48.33333%, 1.021282 49.16667%, 1.015625 50%, 1.010088 50.83333%, 1.004834 51.66667%, 1 52.5%, 0.995693 53.33333%, 0.991993 54.16667%, 0.988951 55%, 0.986593 55.83333%, 0.984919 56.66667%, 0.983908 57.5%, 0.983519 58.33333%, 0.983697 59.16667%, 0.984375 60%, 0.985476 60.83333%, 0.986919 61.66667%, 0.988621 62.5%, 0.9905 63.33333%, 0.992476 64.16667%, 0.994476 65%, 0.996433 65.83333%, 0.998291 66.66667%, 1 67.5%, 1.001523 68.33333%, 1.002831 69.16667%, 1.003906 70%, 1.00474 70.83333%, 1.005332 71.66667%, 1.005689 72.5%, 1.005827 73.33333%, 1.005764 74.16667%, 1.005524 75%, 1.005135 75.83333%, 1.004625 76.66667%, 1.004023 77.5%, 1.003359 78.33333%, 1.00266 79.16667%, 1.001953 80%, 1.001261 80.83333%, 1.000604 81.66667%, 1 82.5%, 0.999462 83.33333%, 0.998999 84.16667%, 0.998619 85%, 0.998324 85.83333%, 0.998115 86.66667%, 0.997989 87.5%, 0.99794 88.33333%, 0.997962 89.16667%, 0.998047 90%, 0.998185 90.83333%, 0.998365 91.66667%, 0.998578 92.5%, 0.998812 93.33333%, 0.999059 94.16667%, 0.999309 95%, 0.999554 95.83333%, 0.999786 96.66667%, 1 97.5%, 1.00019 98.33333%, 1.000354 99.16667%, 1 100%) infinite both;
}
@keyframes easing-elastic-out {
0% { transform: translateX(-80px); }
100% { transform: translateX(80px); }
}
@media (prefers-reduced-motion: reduce) {
.demo { animation: none; }
}
</style>