CSS 트랜지션
*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다.
또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다.
변형에 사용하는 속성과 함수
속성 transform
변형을 사용할 때에는 속성 transform을 사용하고 값으로는 밑에 표로 나열되어 있는 함수를 적절히 사용하면 된다.
기본 값 transform: 함수(값)
2차원 변형
3차원 변형
translate
translate(tx, ty) 값에서 tx값만 입력하면, ty값은 0으로 간주한다.
또한 각 값이 양수라면 x 축은 오른쪽 y 축은 아래쪽으로 음수라면 반대로 이동한다.
scale 함수와 헷갈릴 수 있기 때문에 두 가지 다 적어주는 것이 좋다.
scale
scale(tx,ty) 값에서 tx값 하나만 입력하게 되면 ty는 tx와 같은 값을 적용한다.
또한 값이 1보다 크다면 확대, 1보다 작다면 축소된다.
rotate
rotate 함수는 2차원, 3차원 변형 모두 사용된다. 각도 값만 입력하게 되면 평면에서 지정한 각도로 회전하게 되고, x,y,z 축 방향 값을 입력하면 각 축을 기준으로 3차원 회전을 하게 된다.
단색에 경우 결과가 미미하기 때문에 transition이나, perspective 속성을 이용한다.
*x,y,z 값은 방향이 들어가며, 방향에 따라 회전 축이 달라진다
skew
skew(tx,ty) 값에서 tx만 입력하면, ty값은 0으로 간주한다.
perspective
perspective는 다른 것과 다르게 함수가 아닌 속성이다. 따라서 사용하는 소스는
#class {
perspective : 200px ; // 원근감
}
#class > div:hover {
transform: rotateX(50deg) ;
}이다. 위 소스는 X축으로 55도 회전하는 변형에 깊잇값을 200px 지정한 것이다.
perspective에서 중요한 것은 변형하는 요소가 아니라 변형하는 요소의 부모 요소에 정의해야 한다는 것이다.
값은 0보다 커야한다.
transition(트랜지션)
transition-property
대상을 지정하는 속성으로 값은 all(기본값), none, <속성 이름>이 있다.
- all - all을 사용하거나 지정을 하지 않았을 때 요소의 모든 속성이 대상이 된다.
- none - 트랜지션을 하는 동안 아무 속성도 바뀌지 않는다.
- <속성 이름> - 적용할 속성을 지정한다. 속성이 여러개라면 쉼표(,)로 구분하여 나열한다.
transition-duration
진행 시간을 지정하는 속성으로 값의 단위는 초(s) 또는 밀리 초(ms)를 사용한다.
또한 transition-property로 지정한 대상이 다수라면 시간 또한 쉼표(,)로 나열하여 각각 지정할 수 있다.
duration 값에 개수가 property 값에 개수보다 적을 경우 시간값을 순서대로 반복해서 사용한다.
transition-timing-function
트랜지션의 속도 곡선을 지정하는 속성으로 미리 정해진 키워드나 베지에 곡선을 이용한다.
- ease(기본값) - 천천히 시작하고 점점 빨라지다 마지막엔 천천히 끝낸다.
- linear - 처음부터 끝까지 일정한 속도로 진행한다.
- ease-in - 느리게 시작한다.
- ease-out - 느리게 끝냅니다.
- ease-in-out - 느리게 시작하고 느리게 끝낸다.
- cubic-bezier(n,n,n,n) - 배지에 함수를 정의해 사용한다. n값은 0~1 사이만 사용할 수 있다.
transition-delay
트랜지션의 지연 시간을 설정하는 속성으로 지정한 시간이 흐른 뒤 트랜지션 효과를 시작한다. 값은 초(s), 밀리초(ms)를 사용한다.
transition
모든 속성을 통합하여 표기할 수 있는 속성이다.
속성값의 나열 순서는 상관없다. 단 시간값을 사용하는 속성이 2개가 있기 때문에 앞에 작성된 시간값을 transtion-duration*으로 뒤에 오는 시간값을 *transition-delay 속성으로 간주한다.