한 줄 요약 - @starting-style과 transition-behavior: allow-discrete를 함께 쓰면, 토스트나 모달이 나타나고 사라지는 모션을 애니메이션 라이브러리 없이 순수 CSS로 만들 수 있습니다.
무슨 일이에요?
알림이나 모달을 부드럽게 띄우고 닫으려면 보통 라이브러리를 쓰거나 setTimeout으로 클래스를 붙였다 떼는 코드를 짰습니다. 특히 사라질 때가 골치였어요. 요소를 display:none 하거나 화면에서 떼면 퇴장 모션이 잘려서 뚝 없어졌거든요. @starting-style은 '요소가 처음 나타나는 순간의 시작 값'을 정의해 등장 모션을 살리고, allow-discrete는 display처럼 원래 전환이 안 되던 속성도 전환되게 해서 퇴장 모션을 끝까지 보여줍니다.
왜 좋아요?
자바스크립트는 '보일지 말지' boolean만 정하고, fade/slide/scale 같은 움직임은 전부 CSS가 처리합니다.
모달/토스트/드롭다운의 열고 닫는 모션을 외부 라이브러리 없이 가볍게 구현합니다.
주의할 점
@starting-style 없이 transition만 주면 등장 모션이 안 보이고, allow-discrete가 없으면 퇴장이 잘립니다. 미지원 브라우저에선 모션 없이 즉시 나타났다 사라질 뿐 기능은 정상이라 @supports로 감지해 폴백을 두면 됩니다. 직접 만져보려면 아래 관련 데모를 확인하세요.