(CSS) Transition & Animation

Mirrer·2022년 4월 30일

CSS

목록 보기

10/15

Transition

요소의 속성값을 자연스럽게 변화

transition CSS 속성은 요소의 자연스러운 변화를 위한 단축 속성이다. 즉 transition속성을 사용하여 두 요소 사이의 상태 변화를 줄 수 있다.

요소의 각 상태는 가상 클래스를 사용해 정의된 :hover나 :active를 사용해 동적으로 만들어진다.

.box {
  /* 변화가 일어날 대상요소에 transition적용 */
	transition: all 2500ms cubic-bezier(.01,.44,1,-0.42) 1000ms;
}

.box.active {
  /* 변화가 일어날 대상요소가 최종적으로 변할 속성값 적용 */
  font-size: 30px;
  background-color: #ff4949;
}

transition의 속성값

transition은 property, duration, timing-function, delay등의 속성값을 사용할 수 있다.

이 때 속성값은 한줄로 축약해서 작성할 수 있다.

property : 변화가 일어날 속성을 명시
duration : 지속시간 (ms(mile second), s(second)단위를 사용)
[timing-function](생략가능) : 변화의 속도 (ease-in, ease-out, ease-in-out, cubic-bezier단위를 사용)
[delay](생략가능) : 변화를 시작할 특정시간

Animation

다수의 스타일을 전환하는 애니메이션을 적용

animation CSS 속성은 다수의 스타일을 전환하는 애니메이션을 적용한다.

animation과 transition의 차이점

transition은 어떤 요소의 css속성을 적용한 뒤 그 속성의 값이 변화할 때 갑자기 바뀌는 것이 아닌 자연스럽게 전환되는 것이다.
animation은 어떤 요소에 적용하고 싶을 때 바로 사용 가능하기 때문에 transition보다 자유도가 높다.

animation 사용 방법

@keyframes 로직 선언

/* animation 로직 선언방법1 */
@keyframes move-box {
  from {
    top: 0;
    background-color: #0066ff;
  }

  to {
    top: 200px;
    background-color: #ff4949;
  }
}

/* animation 로직 선언방법2 */
@keyframes move-box {
  0% {
    top: 0;
    background-color: #0066ff;
  }

  50% {
    top: 100px;
    background-color: #ff1;  
  }

  100% {
    top: 200px;
    background-color: #ff4949;
  }
}

사용 대상에 animation 로직 적용

.box {
  position: relative;
  width: 300px;
  height: 300px;

  /* defailt색상을 지정하지 않으면 animation이 끝나고 사라진다. */
  background-color: #0066ff;

  /* animation 로직 적용 */
  /* transition과 동일 속성 */
  animation-name: move-box;
  animation-duration: 2000ms;
  animation-timing-function: ease-in-out;
  animation-delay: 1000ms;

  /* animation 추가 속성 */
  /* 반복 횟수 -> 정수값, infinite */
  animation-iteration-count: 3;
  /* @keyframes 진행 방향 */
  /* alternate : from, to -> to, from 방향 반복 */
  animation-direction: alternate;

}