[ HTML+CSS ] Transform, Transition, Animation
이 내용은 필요할때 검색해서 쓰면 되지만... 그래도 한번 정리해 놓으면 쉽게 사용할 수 있으므로... 귀찮아도 정리를 해보자!!
[1] Transform
말그대로 '변형' 속성이다. 회전, 크기 조절, 왜곡 등의 효과를 넣을 수 있다. Transition과 Animation과 같이 쓰면 유용하다. 어떤 속성이 있는지 알아보고, 예제까지 살펴보자.
1. 3D Transform
- rotateX(50deg) : 3차원 평면에서, X축 기준 360도까지 회전시켜주는 속성. 괄호 안에 회전시키고자 하는 각도를 적어주면 된다.
- rotateY(50deg), rotateZ(50deg) : 3차원 평면에서, 각각 Y축, X축 기준으로 회전시켜주는 속성.
쉬운 이해를 위해 transition과 같이 썼다. 박스에 마우스를 올려놓으면 차이를 알 수 있다.
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
2. 2D Transform
- translate(Xpx, Ypx) : relative 포지션과 똑같다. 현재 위치를 기준으로 Xpx 오른쪽, Ypx 아래로 이동한다. 음수는 반대가 방향이 된다.
- rotate(360deg) : 2차원 회전 효과. 양수는 시계방향, 음수는 반시계방향으로 회전한다.
- scaleX(N) : width만 N배.
- scaleY(N) : height만 N배.
- scale(X, Y) : width는 X배, height는 Y배.
- skewX(20deg) : 각도가 양수면 영역의 상단은 왼쪽방향으로, 하단은 오른쪽 방향으로 비틀림.
- skewY(20deg) : 각도가 양수면 영역의 우측은 아래로, 좌측은 위로 비틀림.
- skew(20deg, 20deg) : 위에 두개 동시에.
쉬운 이해를 위해 transition과 같이 썼다. 박스에 마우스를 올려놓으면 차이를 알 수 있다.
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
[2] Transition
어떤 요소에 특정 이벤트가 발생할때 그 요소의 속성값을 변경시켜주는 역할을 한다. 자바스크립트에서 'animate'와 동작이 비슷하다. CSS에서는 일반적으로 마우스의 hover 또는 activate 이벤트와 연결시킨다.
- transition-property : 효과를 적용하고자 하는 css 속성.
- transition-duration : 효과 지속 시간.
- transition-timing-function : 효과의 속도. 여기서 다양한 속성값을 볼 수 있다.
- transition-delay : n초 후 발동. s 또는 ms 단위 가능. 음수값도 가능.
- transition : property duration timing-function delay (한줄 문법)
사용 방법은 아래와 같다.
1. 적용 대상에 transition 속성을 부여해준다.
2. :hover 또는 :activate 클래스에 transition-property에서 명시한 속성의 결과값을 적어준다.
※ property로 transform도 가능하다. 예제 참고.
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
[3] Animation
앞서 transition이 이벤트에 의한 발생이라면, animation은 자동 재생이다. 이벤트 필요 여부가 transition과 animation의 가장 큰 차이점이다. 애니메이션은
- @keyframes : 변화시키고자 하는 속성과 속성값을 적어주는 구역. 속성 변화 구간을 %로 나눌 수 있다. 일반적으로 from과 to로 나눈다. %로 나누는건 예제에서 살펴보자. 참고로 from이 0%, to가 100%이다.
- animation-name : 애니메이션 이름으로, keyframes 바로 뒤에 오는 값이다.
- animation-duration : 효과 총 지속시간
- animation-delay : n초 후 발동. s 또는 ms 단위 가능. 음수값도 가능.
- animation-iteration-count : 애니메이션 반복 횟수. infinite로 설정하면 무한 반복한다.
- animation-direction
- normal : forward 방향으로만 실행
- reverse : backward 방향으로만 진행
- alternate : forward - backward 순서로 진행. iteration이 설정되어 있지 않으면 normal과 똑같다. iteration이 설정되어 있으면 forward, backward 각각 1회로 친다.
- alternate-reverse : backward - forward 순서로 진행. iteration이 설정되어 있지 않으면 reverse와 똑같다. iteration이 설정되어 있으면 forward, backward 각각 1회로 친다.
- animation-timing-function : 효과의 속도. 여기서 다양한 속성값을 볼 수 있다.
- linear : 일정한 속도
- ease : 기본값인데 설명을 못하겠다. 점점 가속 후 점점 감속(?). 하이퍼링크 가서 눈으로 보자.
- ease-in : 점점 가속
- ease-out : 점점 감속
- animation-fill-mode
- none : 기본값으로 애니메이션 효과가 끝나면 원래 속성값으로 돌아온다.
- forwards : 애니메이션 효과가 끝나면 원래 속성값으로 돌아가지 않고 keyframes의 to 속성값으로 유지한다.
- backwards : 애니메이션 시작 전에 keyframes의 from 속성값을 가진다.
- both : forwards + backwards
- animation : name duration timing-function delay iteration-count direction (한줄 문법)
아래는 fill-mode의 네 가지 속성값이 어떻게 다른지 나태낸 예제다. 우측 아래에 위치한 Return 버튼을 눌러서 계속 실행시켜보자.
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
마지막으로 keyframes에서 속성 변화 구간을 %로 나누는 예제를 살펴보자. 0 ~ 100%를 4등분해 각 구역마다 속성 변화를 다르게 줬다.
See the Pen Untitled by 이찬 (@vexkruqa-the-typescripter) on CodePen.
<참조>