[CSS] Transition & Animation & Transform

transition 속성

transition은 속성을 서서히 변화시키는 속성

div {
  transition: property duration [timing-function] [delay];
}

① property

transition을 적용시킬 속성을 지정
transition-property: none | all | property | initial | inherit

• none : 모든 속성에 적용하지 않는다.
• all : 모든 속성에 적용한다.
• property : 속성을 정해준다. 여러개의 속성을 지정할 경우 쉼표로 구분
• initial : 기본값으로 설정한다.
• inherit 부모 요소의 속성값을 상속받는다.

② duration

transition의 총 시간을 지정(지속시간)
transition-duration: time | initial | inherit
ex) transition: font-size 2.5s; //font-size만 바꿀때
ex) transition: all 2.5s; //전부바꿀때

• 기본값은 0s
• ms | s -> 1000ms == 1s
• initial : 기본값으로 설정
• inherit : 부모 요소의 속성값을 상속받는다.

③ timing-function

transition의 변화 속도를 지정(진행속도)
transition-timing-function: ease-in | ease-out | ease-in-out | cubic-bezier() | initial | inherit

• ease-in : 처음에는 천천히 나중에는 빨리
• ease-out : 처음에는 빨리 나중에는 천천히
• ease-in-out : ease-in, ease-out을 섞은것
• cubic-bezier(n, n, n, n) : n에는 0~1까지 넣어준다.
  https://cubic-bezier.com/ 참고!
• initial : 기본값으로 설정
• inherit : 부모 요소의 속성값을 상속받는다.

④ delay

transition이 몇초후에 실행되면 좋을지 설정
transition-delay: time | initial | inherit

• 기본값은 0s
• ms | s -> 1000ms == 1s
• initial : 기본값으로 설정
• inherit : 부모 요소의 속성값을 상속받는다.

👩‍💻 참고) transition: font-size 1000ms ease-out, background-color 2000ms cubic-bezier(0.8, 0.5, 0.9, -0.6) 1000ms; 이런식으로 각각의property마다 개별적으로 줄 수 있다.

animation 속성

CSS의 애니메이션 속성으로 동적인 효과를 만들 수 있다. (transition보다 자유도가 더 크다)

div {
  animation: property duration [timing-function] [delay]
}

① animation-name : 애니메이션이름;

• 어떤 @keyframes를 사용할지 정한다.

② @keyframes

어떤모양에서 어떤 모양으로 변할지 정해준다.

@keyframes 애니메이션이름 {
  from {
  /* rules */
  }
  to {
  /* rules */
  }
  
  0% {}
  50% {}
  100% {}
}

• 애니메이션이름 : 애니메이션의 이름을 지정
• 0% : 시작할 때의 모양, 0% 대신 from 사용가능
• 100% : 끝날 때의 모양, 100%대신 to 사용가능

③ animation-duration

애니메이션의 총 시간,
animation-duration: time | initial | inherit

• time : 지속시간을 지정, ms | s 사용
• initial : 기본값으로 설정
• inherit : 부모 요소의 속성값을 상속받는다.

④ animation-timing-function

애니메이션의 진행속도를 지정
animation-timing-function : ease-in | ease-out | ease-in-out

⑤ animation-delay

애니메이션을 시작하기 전에 대기하는 시간(몇초뒤에동작하는지)
animation-delay: time | initial | inherit

• time : 시간을 지정, 기본값 0, ms | s 사용
• initial : 기본값으로 설정
• inherit : 부모 요소의 속성값을 상속받는다.

⑥ animation-iteration-count

애니메이션의 반복횟수 지정
animation-iteration-count : 정수입력 | infinite(무한반복)

⑦ animation-direction

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit

• normal : 기본값, 정해진 순서대로 진행
• reverse : 반대 순서로 진행
• alternate : 정해진 순서로 진행했다가 반대순서로 진행
• alternate-reverse : 반대 순서로 진행했다가 정해진 순서로 진행
• initial : 기본값으로 설정
• inherit: 부모 요소의 속성값을 상속받는다.

ex) animation-direction: alternate;
번갈아가면서작동 (form->to로 갔다가 reverse(to -> from)갔다가)

transform 속성

transform 속성으로 요소를 회전하거나 확대/축소 등 형태를 변형할 수 있다.

① transform: translate(x, y);

요소를 x축, y축으로 위치시키고 싶을 때

• translateX : x축 방향으로 이동
• translateY : y축 방향으로 이동
  👩‍💻 참고) 안에 px말고 %단위로도 넣을 수 있음 -> 누구를 기준으로 %를 가지는지 (transform이 들어있는 자기자신의 크기를 기준으로)

.box{
  width: 300px;
  height: 300px;
  transform: translate(10%, 10%);
/* width의 10%, height의 10% */
}

② transform: scale(N);

N배만큼 사이즈를 확대하거나 축소할 때 사용
👩‍💻 참고) transform: scale(x, y); : 자신의 width만큼의 x배, height의 y배

③ transform: rotate(각도);

각도만큼 요소를 회전시킨다.

• transform: rotate(angle)
• transform: rotateX(angle) : x축을 기준으로 회전
• transform: rotateY(angle) : y축을 기준으로 회전