애니메이션 사용하기 @keyframes

웹사이트에서 애니메이션 만드는 방법은 자바스크립트로 제작을 많이들 하시는데요.

오늘은 CSS를 이용해서 애니메이션을 구현하는걸 설명드리겠습니다.

우선 동영상을 보면서 애니메이션 동작 설명부터 하겠습니다.

동영상을 보시면 비쥬얼 이미지가 위 아래로 이동되는 애니메이션 효과가 있는데요.

자바스크립트로도 구현이 가능하나 CSS를 이용하면 보다 적은 코드로 가능하다는걸 알 수 있습니다.

방법은 CSS animation 속성과 @keyframes 함수를 이용하는것인데요.

animation 속성의 하위 속성은 다음과 같습니다.

animation-delay

엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.

animation-direction

애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.

animation-duration

한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.

animation-iteration-count

애니메이션이 몇 번 반복될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있습니다.

animation-name

이 애니메이션의 중간 상태를 지정합니다. 중간 상태는  @keyframes 규칙을 이용하여 기술합니다.

animation-play-state

애니메이션을 멈추거나 다시 시작할 수 있습니다.

animation-timing-function

중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.

animation-fill-mode

애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

animation 효과에 대해서 더 자세한 정보를 원하시면 아래 링크로 들어가시면됩니다.

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations#애니메이션_적용하기

https://www.w3schools.com/css/css3_animations.asp