CSS 애니메이션 @keyframe이란 무엇일까?

@keyframe이란 무엇이냐에 대해 말하기 전에  toss, apple 같은 사이트에 가면 웹 스크롤을 내리는데 아래에서 뭔가 뿅 하고 나오고? 옆에서 나오며 동영상이 아닌데 스크롤을 내리면 동영상을 제작하는 듯한 느낌이 날 때가 있죠? 

 

css 애니메이션 효과를 준 것 인데요

물론 자바스크립트로도 구현할 수 있지만 제 기준에서는 css, scss에서 구현하기 더 쉬운 거 같아요

js를 몰라도 구현이 가능하며 성능도 js로 만들었을 때보다 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링을 합니다.

 

CSS 애니메이션 문법

/* 단일 속성 */
.object {
    animation-name: 1s;
    // 애니메이션의 이름을 지정합니다.
    animation-duration: 2s;
    // 애니메이션의 한사이클 횟수를 지정합니다.
    animation-delay: 1s;
    // 애니메이션이 로드되고 나서 언제 시작할지 지정합니다.
    animation-direction: alternate;
    // 애니메이션의 재생 방향을 지정합니다.
    animation-iteration-count: 3;
    // 애니메이션의 반복 횟수를 지정합니다.
    animation-play-state: paused;
    // 애니메이션을 재생 멈춤을 할 수 있도록 합니다. 
    animation-timing-function: 1s;
    // 애니메이션의 좐환을 어떤 시간 간격으로 진행할지 결정합니다.
    animation-fill-mode: both;
    // 애니메이션이 시작 혹은 종료 때 어떤 값을 적용할지 지정합니다.
}
    
/* 속기형 */
animation: name | duration | timing-function | delay | iteration-count | 
direction | fill-mode | play-state> [,...];

 

@keyframe 문법

@keyframes animation-name {
  from {
    /* 애니메이션 시작 시의 스타일 */
  }
  to {
    /* 애니메이션 끝 시의 스타일 */
  }
}

// 더 세밀하게 백분율을 사용하여
@keyframes animation-name {
  0% {
    /* 애니메이션 시작 시의 스타일 */
  }
  50% {
    /* 애니메이션 중간 시의 스타일 */
  }
  100% {
    /* 애니메이션 끝 시의 스타일 */
  }
}

// 혹은 시간을 설정
@keyframes slide {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

.element {
  animation: slide 3s ease-in-out infinite;
}

 

장점

1. 다양한 애니메이션 효과

2. css와의 통합

3. 재사용성

단점

1. 호환성

2. 제한된 기능

3. 디버깅어려움

---

 

느낀 점 

공부하면서 정말 transition 등 애니메이션 명령어는 끝이 없는 거 같았습니다. 이것 또한 프런트엔드 개발자의 역량이 되겠죠... 역시 아직 할 공부는 많고 많이 멀었습니다. 할 말은 많지만 다 적으면 내용보다 길꺼같으니 한마디로 요약하면 다 같이 열심히 하죠!