CSS : 애니메이션 적용 (transition, animation)

• transition

※ 사용하는 이유
- 특정 요소에 부드러운 애니메이션 효과를 주기위해 사용한다.

※ 특징
- hover, onclick과 같은 이벤트에 의해 동작한다.

※ 공식 홈페이지 (mdn)
- https://developer.mozilla.org/ko/docs/Web/CSS/transition

※ 기본 사용법

transition: property | duration | timing-function | delay;

- property : 어떤 CSS 속성(width, height 등)에 애니메이션을 부여할지 지정한다.
- duration : 몇초에 걸쳐 애니메이션 전환이 일어나게할지 지정한다.
- timing-function : 애니메이션 전환 동안 시작과 끝 부분에 대한 속도를 조절하여 전체적인 애니메이션의 동작을 제어한다.
- delay : 전환의 시작을 지연시키는 시간으로 몇초후에 애니메이션을 실행시킬지 지정한다.

 

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 0.5s ease-in-out;
}

/* hover 시 width 변경 */
.box:hover {
  width: 150px;
}

 

• animation

※ 사용하는 이유
- 특정 요소에 부드러운 애니메이션 효과를 주기위해 사용한다.

※ 특징
- transition에 비해 조금더 세밀한 설정이 가능하다.
- 특정 이벤트 없이도 시작, 정지, 반복을 제어할 수 있다.

※ 공식 홈페이지 (mdn)
- https://developer.mozilla.org/ko/docs/Web/CSS/animation

※ 기본 사용법

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

- name : 사용할 keyframes 규칙의 이름을 지정한다. 이때 keyframes 규칙은 실제 애니메이션을 정의하는 데 사용된다.
- duration : 몇초에 걸쳐 애니메이션 전환이 일어나게할지 지정한다.
- timing-function : 애니메이션 전환 동안 시작과 끝 부분에 대한 속도를 조절하여 전체적인 애니메이션의 동작을 제어한다.
- delay : 전환의 시작을 지연시키는 시간으로 몇초후에 애니메이션을 실행시킬지 지정한다.
- iteration-count : 애니메이션의 반복 횟수를 지정한다.
- direction : 애니메이션이 진행하는 방향을 지정한다.
- fill-mode : 애니메이션이 시작하기 전이나 끝난 후에 요소의 스타일을 어떻게 유지할지를 지정한다.
- play-state : 애니메이션의 상태인 실행, 중지를 지정한다.

- from, to 방식

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.element {
  animation: rotate360 2s linear infinite;
}

- % 방식

@keyframes colorChange {
  0% {
    background-color: red;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: red;
  }
}

.element {
  animation: colorChange 3s infinite;
}