[CSS] 애니메이션 넣는 법 keyframes

간단한 애니메이션 넣는법!

@keyframes를 입력하고 애니메이션 이름을 정합니다.

0%일 때와 100%일 때 어떤 모습일지를 정합니다.

투명도와 위치 변화를 통해 페이드인 되는 듯한 애니메이션을 넣어보았습니다.

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

  100% {
    opacity: 1;
    transform: translate(0);
  }
}

 

 

애니메이션을 적용할 때는 애니메이션 적용을 원하는 곳에 아래 내용을 입력하면 됩니다.

 

  animation-name: moveInLeft;
  animation-duration: 3s;
  animation-timing-function: ease-out;

 

 

이 3가지를 요약해서 적으면 아래와 같이 한 줄로 적을 수 있습니다.

  animation: moveInLeft 1s ease-out;

 

<결과물>

 

결과물에 적용하지는 않았지만 추가로 입력할 수 있는 내용입니다.

지연과 반복횟수를 정할 수 있습니다.

animation-delay: 3s;
animation-iteration-count: 3;