[CSS] ease-in ? ease-out?

CSS에서 애니메이션을 구현할 경우, transition과 animation 속성에서 'ease*'값을 줄 때가 있다.

.Modal {
    transition: all 0.3s ease-in-out;
}

.Modal {
	animation: openModal 0.3s ease-in-out forward;
}

막연하게 애니메이션을 부드럽게 해준다는 개념만 알고있었는데, 더 이상 헷갈리지 않게 각각의 속성값을 정리 해보겠다.

위 그래프를 보면, 조금 직관적으로 와닿을 것이다.

가로축이 시간, 세로축이 결과값이다.

설명을 덧붙이자면 다음과 같다.

ease: 천천-빠름-천천

ease-in: 보통-빠르게

ease-out: 보통-느리게

ease-in-out: 천천-보통-천천(ease와 그래프 모양이 같은데, 기울기 변화 속도는 다르다)