トーストの滑らかな出現

マイクロインタラクション

トーストは下から ease-out で滑らかに出現。

実装例

css

.toast { transform: translateY(20px); opacity: 0; transition: all .25s cubic-bezier(0.16, 1, 0.3, 1); }
.toast.show { transform: translateY(0); opacity: 1; }

トーストの滑らかな出現

:LiTarget: 原則

トーストは下から ease-out で滑らかに出現。

:LiCode: 実装例

.toast { transform: translateY(20px); opacity: 0; transition: all .25s cubic-bezier(0.16, 1, 0.3, 1); }
.toast.show { transform: translateY(0); opacity: 1; }