트랜지션, 애니메이션 속성정리

 

1. transform [변형]

: 객체를 변형하는 속성

: 요소에 회전, 크기 조절, 기울이기, 이동효과를 부여함

 

transform으로는 아무리 모양을 변형해도 자신의 고유축은 절대 변경불가

 

 

 

 

[2차원 변형과 3차원 변형]

- 2차원 변형은 단순히 수평이나 수직으로 이동하고 회전하는 것

- 3차원 변형은 z축을 추가해 원근감을 주는 것

 

 

transform과 변형 함수

transform : 변형 함수;

 

이미지를 회전시키거나 이동하는 등 변형하려면 transform 속성을 사용해야 합니다.

 

 

 

 

translate 변형 함수 - 요소 이동시키기

- 이 함수는 2차원과 3차원에서 모두 사용가능한 함수입니다.

 

transform : translate(x, y);
transform : translate3d(X, Y, Z)
transform : translateX(X)
transform : translateY(Y)
transform : translateZ(Z)

[2차원] transform: translateX(70px);  /  transform: translateY(70px);  /  transform: translate(70px, 70px);

 

 

 

 

 

 

scale 변형 함수 - 요소 확대/축소하기

- 지정한 크기만큼 확대/축소합니다.

 

transform : scale(x, y);
transform : scale3d(X, Y, Z)
transform : scale(X)
transform : scale(Y)
transform : scale(Z)

[2차원] transform : scaleX(1.2) / scaleY(1.2) / scale(1.2)

 

 

 

 

 

rotate 변형 함수 - 요소 회전하기

- 지정한 각도만큼 회전시킵니다.

- 회전 각도가 양수일 경우 시계 방향으로 회전하고 음수일 경우 반대 방향으로 회전합니다.

 

/* 2차원 함수 기본형 */
transform : rotate(각도)

/* 3차원 함수 기본형 */
transform : rotate(x, y, 각도)
transform : scale(Y)
transform : scale(Z)

[2차원] transform: rotateX(45deg); / rotateY(45deg); / rotate(30deg);

 

 

 

 

 

 

skew 변형 함수 - 요소를 비틀어 왜곡하기(기울이기)

 

- skew 함수는 2차원 변형만 가능합니다.

- 이 함수는 요소를 지정한 각도만큼 비틀어 왜곡합니다.

- 이때 한쪽 방향이나 양쪽 방향으로만 비틀 수 있습니다.

 

transform : skew(X,Y)
transform : skewX(X)
transform : skewY(Y)

transform: skewX(-45deg); / skewY(-45deg); / skew(45deg);

 

 

 

 

 

 

2. transform과 관련된 속성들

 

transform-origin 속성 - 변형의 중심축을 변경

이 속성을 이용하면 축이 아닌 특정 지점을 변형의 기준으로 설정할 수 있습니다.

 

transform-origin : 0% 0%;

transform-origin : center center;

 

- 속성값은 백분율(%)과 키워드 중 하나로 지정할 수 있습니다.

- 백분율 0% , 50%, 100%

- 키워드 left, top, center, right, bottom

 

transform: rotate(45deg); transform-origin: center center; / 0% 0%;

 

 

 

 

perspective, perspective-origin 속성 - 원근감 표현하기

 

perspective : 크기 | none;

 

-원래 위치에서 사용자가 있는 방향이나 반대방향으로 잡아당기거나 밀어내 원근감을 가지게 합니다.

-크기 400px ~ 1000px 사이 지정

 

 

 

 

transform-style 속성 - 3D 변형 적용하기

이 스타일을 사용하면 3D 변형을 하위 요소에도 적용할 수 있습니다.

 

- transform-style : preserve-3d;

--> 자식 요소의 3d변환을 사용

 

 

 

backface-visibility 속성 - 요소의 뒷면 표시하기

회전할 때 각도가 90도를 넘으면 뒷면이 보입니다.

하지만 보이고 싶지 않을때 이 속성을 사용합니다.

 

 

 

 

-- 사용시 유의사항 --

transform으로 3d효과를 만든 다음 부모에 모션을 적용하는 순간

자식요소의 3d효과가 강제 해제됨

 

해결방법 : 3d효과를 준 부모요소에 transform-style : preserve-3d; 적용

주의사항 : preserve-3d와 perspective를 같은 요소에 동시에 적용되면 모션이 깨진다.

 

 

 

예시1) 안좋은 방법 (X)

 

#wrap section {

  perspective: 700px;

  transform-style: preserve-3d;

}

 

 

 

예시2) 좋은 방법 (O)

 

#wrap { perspective: 700px; }

#wrap section { transform-style: preserve-3d; }

 

 

 

 

 

 

 

 

3. 트랜지션

트랜지션이란?

- 웹 요소의 배경 색이 바뀌거나 도형의 테두리가 원형으로 바뀌는 것 처럼 스타일 속성이 바뀌는 것을 말합니다.

 

 

transition-property 속성 - 트랜지션을 적용할 속성 지정하기

/* 해당 요소의 모든 속성에 트랜지션 적용*/
transition-property: all; 

/* 해당 요소의 배경 색에 트랜지션 적용 */
transition-property: background-color;

/* 해당 요소의 너비와 높이에 트랜지션 적용 */
transition-property: width, height;

 

transition-duration 속성 - 트랜지션을 진행시간 지정하기

transition-duration: <시간>

 

transition-timing-function 속성 - 트랜지션 속도 곡선 지정하기

transition-timing-function :
liner | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)

 

transition-delay 속성 - 지연 시간 설정하기

transition-delay : <시간>

 

transition 속성 - 트랜지션 속성 한꺼번에 표기하기

transition :
transition-property 값 | transition-duration 값 | transition-function 값 | transition-delay 값

 

 

 

 

 

 

 

4. 애니메이션

 

animation 속성

animation 속성은 애니메이션을 설정하거나 제어하는 역할을 담당합니다.

@keyframes 라는 속성과 함께 작성이 되어야 합니다.

 

/* css */
animation : name duration timing-function delay iteration-count direction fill-mode play-state;

​animation : 이름 | 지속시간 | 속도 | 지연시간 | 반복횟수 | 진행방향 | 전후상태 | 재생/정지;

 

 

 

@keyframes 속성

애니메이션 지점 설정하기

 

 

[keyframes 속성 사용법]

@keyframes 이름 {

  0% {}

  50% {}

  70% {}

  100% {}

}

 

@keyframes 이름 {

  to {}

  50% {}

  top {}

}

 

 

 

 

 

1. animation-name

애니메이션 이름 지정하기

@keyframes에 존재하는 애니메이션을 요소에 연결시켜주는 기능

/* 사용방법 */
animation-name : alpha;

 

 

 

2. animation-duration

애니메이션 지속 시간 설정하기

1s, 2s, 100s로 1초, 2초, 100초 등 다양하게 설정 가능하며, ms단위 또한 사용가능. 1s = 1000ms

 

/* 사용방법 */
animation-duration : 1s;

 

 

 

3. animation-timing-function

애니메이션 속도 곡선 지정하기

애니메이션이 빠르게 움직였다가 느려지거나, 일정하거나, 느렸다 빨라지는 등 속도 조절가능

 

- ease : 빠르게 ~ 느리게

- linear : 일정하게

- ease-in : 느리게 ~ 빠르게

/* 사용방법 */
animation-timing-function: linear;

 

 

 

4. animation-delay

애니메이션의 대기시간을 설정해주는 속성

1s의 값을 가지고 있으면 1초 후에 시작합니다.

(-1s의 값을 가지고 있으면 1초가 지났을 시점부터 시작을 합니다.)

/* 사용방법 */
animation-delay : 1s;

 

 

 

5. animation-iteration-count

애니메이션이 반복 횟수를 설정

기본적으로 한번 반복을 하는 것으로 설정이 되어 있습니다.

숫자가 아닌 무한반복을 원한다면 infinite를 입력

/* 사용방법 */
animation-iteration-count : infinite;

 

 

 

6. animation-direction

애니메이션 방향 지정하기

 

- normal : 기본 값

- reverse : 역방향

- alternate : 정방향 ~ 역방향으로 반복 (왕복)

- alternate-reverse :  역방향 ~ 정방향으로 반복 (왕복)

/* 사용방법 */
animation-direction : alternate;

 

 

 

7. animation-fill-mode 속성

애니메이션의 전후상태를 설정

즉, 시작위치와 끝위치를 설정하는 속성

(iteration-count 와 direction이랑 사용하지 말 것)

 

 

- none : 기존위치에서 시작, 기존위치에서 끝

- forwards : 애니메이션의 기존 위치에서 시작, 끝나는 위치에서 끝

- backwards : 애니메이션의 시작 위치에서 시작, 기존 위치에서 끝

- both : 애니메이션의 시작 위치에서 시작 끝, 위치에서 끝

 

/* 사용방법 */
animation-duration : both;

 

 

 

 

8. animation-play-state

애니메이션의 재생과 정지를 설정

running와 pause 두개의 속성을 가지고 있습니다.

/* 사용방법 */
animation-play-state : paused;

 

 

 

 

 

 

[참고 블로그]

 

blog.naver.com/takudaddy/221942561703

blog.naver.com/codbs7/221530831183

blog.naver.com/ane132/222267190183