Transition
-
트랜지션 (transition)프론트엔드/CSS 2020. 9. 16. 03:21
트랜지션이란? CSS의 프로퍼티 즉 속성값이 바뀔 때 그 변화가 바로 일어나지 않고 시간차를 두고 일어나게 하는 것이다. 위 코드와 같이 설정하면 div 요소에 마우스 커서가 올라가면 사각형의 크기가 줄어든다. 그런데 여기선 트랜지션을 설정해줘서 div가 변화하는 과정을 순식간이 아닌 2초로 느리게 변화하게 바꿨다. 트랜지션의 발동 조건 트랜지션은 혼자서 발동하지 않는다. 그냥 CSS를 적용한다고 끝이 아니라 자바스크립트를 이용하거나 가상 클래스 선택자(hover)와 같은 추가적인 코드 작성이 필요하다.