transition CSS 속성 전환에 대한 태그 요소 (cubic-bezier 사용법)
지난 시간에 이어서 transition 애니메이션에 대한 요소를 배워보겠습니다. 이번에는 속도를 조절하기 위한 방법을 알아보도록 하겠습니다. 우선 전 시간에도 잠깐 배워보았듯 기본적인 구조는 다음과 같습니다.
transition : property duration timeingfunction;
그리고 각 요소에 대한 설명은 아래와 같습니다.
property : 애니메이션을 적용할 태그 요소를 지정
duration : 애니메이션 재생 시간
timeingfunction : 애니메이션 속도 옵션
그래서 실질적으로 이 부분에 대해서는 이론만으로는 이해하기가 어렵기 때문에 아래의 코드를 먼저 구성해봤습니다.
See the Pen transition options by rgy0409 (@rgy0409) on CodePen.
HTML와 CSS 부분을 클릭하면 코딩 상태를 확인할 수 있습니다. 각 div는 마우스를 올렸을 경우에 애니메이션 효과를 다양하게 보여지게 하기 위해서 여러개를 만든 것 입니다. 그리고 CSS 스타일 부분을 보시면 timeingfunction 부분에 속도의 변화를 주기 위한 여러 요소가 들어갑니다. 각 부분에 대해서는 주석을 달아놨으니 참고해 보시면 될 것 같습니다. 가장 변화가 두드러지게 나타나는 요소는 cubic-bezier 입니다.
cubic-bezier 는 총 네개의 값이 들어갑니다. 각 부분에 대해서는 저도 정확히는 알 수 없지만, 0에서 1 사이의 값을 사용하는게 보통입니다. 물론 1 이상의 값을 입력할 수 있는데, 그런 경우는 움직임이 상당히 이상해지므로 통상적으로 0~1 까지의 소수점을 활용한 값을 입력하면 됩니다. 가령, linear의 속도에 대한 경우는 값이 (0,0,1,1) 또는 (0.25,0.25,0.75,0.75) 입니다. 이것을 직관적으로 살펴볼 수 있는 사이트가 있는데, 아래를 참고해주시면 됩니다.
https://matthewlein.com/tools/ceaser
이렇게 해서 완성된 transition 요소에 대한 애니메이션을 살펴보도록 하겠습니다. 아래에 미리 확인하실 수 있도록 코드펜을 활용해서 올려놨습니다. 하나하나의 div에 마우스를 올려보세요. 애니메이션이 실행됩니다. 그렇습니다. 이렇게 CSS에서도 transition을 활용해서 애니메이션 효과를 만들어 줄 수 있습니다. 그냥 이런저런게 다 햇갈린다 싶으시면 transition: all 숫자s; 로 넣어주시면 됩니다. 원래 기본값이 최고입니다. 끝.
"친절한효자손 취미생활" 을 검색!
