트랜지션 (transition) [Jquery, CSS]

공부/Jquery,CSS  2016.03.17 00:01

안녕하세요. 명월입니다.
이번 포스트는 CSS의 트랜지션에 대해서 공부하겠습니다.


먼저 트랜지션(transition)이란 속성 변경 시에 변화의 속도(?)를 조절하는 것, 변화의 주기를 설정하는 기능이라고 할 수 있습니다. 쉽게 이야기하면 흰색에서 검은색으로 색을 변경한다고 하면 트랜지션을 설정하면 흰색에서 회색 -> 검은 회색 > 검은색으로 점차 변하는 설정을 이야기합니다.


예제를 통해서 자세히 공부하겠습니다.



다음은 CSS에 대한 트랜지션의 예제입니다.



트랜지션은 총 네 가지의 스타일 속성이 있습니다. 네 가지라고 해도 사용할 때는 delay 빼고는 동시에 작성해야 효과가 있습니다.
먼저 transition-property는 트랜지션의 속성을 부여할 CSS style입니다. 우리는 background-color 변환에 효과를 주었습니다.
그리고 transition-duration은 변화의 시간입니다. 총 2초에 걸쳐서 aqua에서 yellow로 변경된다는 의미입니다.
transition-timing-function은 변화의 주기인데 옵션으로는 ease 느려졌다 빨라졌다 느려졌다. linear는 일정한 속도, ease-in은 느려지는 속도 ,ease-out은 빨라지는 속도, ease-in-out은 빨라졌다 느려졌다 빨라지는 속도, cubic-bezier(n,n,n,n) 직접 속도지정이 있습니다. 그리고 마지막으로 transition-delay는 일정 시간 뒤에 실행하라는 스타일입니다.


저는 색이 aqua에서 노란색으로 바뀌는데 50ms 후에 빨라지는 속도로 2초 동안바뀌라는 스타일이네요.


안녕하세요. 명월일지입니다. 이곳은 예제입니다.


위 예제는 실제 포스트에 적용했으니 마우스로 올려봐서 확인하세요.(모바일은 hover가 없기에 확인이 힘드네요.)


웹 페이지에서 트랜지션은 정적인 웹 환경에 정말 감초 같은 역할을 합니다. 조금은 더 시선을 끌 수 있는 역할을 하기도 합니다. 하지만 트랜지션을 너무 많이 넣으면 오히려 콘텐츠의 시선을 뺏겨 컨텐츠의 집중도를 떨구기도 합니다.
그런 이야기는 디자인 고수들의 이야기고요... 저 같은 경우도 많은 트랜지션을 쓰면 오히려 집중도를 떨어트리는 걸 알기에 메뉴바 호출(조금은 부드러운 이미지를 주기 위해 사용하기도 합니다.)



댓글 0개가 달렸습니다.
댓글쓰기