🕺

CSS animaion에서의 key frame

간단소개

keyframe이 이런거구나~

팔만코딩경 컨트리뷰터

ContributorNotionAccount

주제 / 분류

CSS

Scrap

태그

9 more properties

[ index ]

1. @keyframes 와 애니메이션 소개

2. @keyframes

3. animation

4. Vendor Prefixes 더하기

1. @keyframes 와 애니메이션 소개

동영상 응용에서 사용하는 언어로, 시작 프레임과 마지막 프레임 중에서 전체 정보를 갖고 있어서 가장 중심이 되는 프레임을 키 프레임
이라고 한다. 예를 들어 애니메이션에서는 처음 화면은 전체 정보를 가지고 있으나 뒤의 화면들은 전체 정보를 모두 갖고 있을 필요가 없다. 왜냐하면 앞의 전체 정보를 갖고 있는 화면과 비교해서 차이가 있는 정보만 담으면 되기 때문이다. 이때 전체 정보를 담고 있는 것이 키 프레임이다. 이렇게 키 프레임을 지정하면 전체적으로 용량을 줄일 수 있다. 애니메이션에서는 처음 화면을 키 프레임으로 지정한 후에도 각 주기마다 전체 정보를 가지고 있는 키 프레임을 만들어 넣음으로써 화면이 자연스럽게 이어지도록 한다.

과학 문화 사이언스올:key-frame의 정의란 무엇인가?

사이언스올에 따르면 key-frame이란 animation의 시작과 중간, 끝의 정보를 가지고 있는 틀이라고 생각하면 될 것 같습니다. CSS 애니메이션에서 가장 중요한 요소가 바로 @keyframes 입니다. @keyframes는 CSS 문법 중 하나로 애니메이션이 만들어지는 부분입니다. @keyframes 안에서 우리는 스테이지들을 정의하고 각 구간마다 다른 스타일을 적용 시킬 수 있습니다.

2. @keyframes

여기서 우리는 애니메이션 스테이지들을 정할 것입니다. 우리의 @keyframes 속성은:

•

우리가 정한 이름 (여기서는 tutsFade로 정했습니다)

•

스테이지: 0%-100%, from (0%와 같음) 그리고 to (100%와 같음)

•

CSS 스타일: 각 구간에 적용시킬 스타일

예를 들어:

@keyframes tutsFade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
CSS
복사

혹은:

@keyframes tutsFade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
CSS
복사

또는 줄여서 쓸 수도 있습니다.

@keyframes tutsFade {
  to {
    opacity: 0;
  }
}
CSS
복사

상단의 코드는 엘레멘트의 투명도를 opacity: 1에서 opacity: 2로 변하게 합니다. 위의 세가지 방법 모두 동일한 결과로 나옵니다.

3. Animation

animation 속성은 예전에 @keyframes로 불리며 CSS 선택자 안에서 존재했었습니다. 애니메이션은 여러개의 속성을 가질 수 있습니다.

•

animation-name: @keyframes 이름 (예시에서는 tutsFade를 사용함)

•

animation-duration: 타임프레임 길이. 애니메이션 시작부터 마지막까지 총 지속시간

•

animation-timing-function: 애니메이션 속도 조절 ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).

•

animation-delay: 애니메이션이 시작하기 전 지연시간

•

animation-iteration-count: 반복 횟수

•

animation-direction: 루프 (loop) 방향. 정방향으로 반복, 역방향으로 반복, 번갈아가며 반복 등을 설정

•

animation-fill-mode: 애니메이션 시작/끝 상태 제어 ( none | forwards | backwards | both )

예를 들어:

.element {
  animation-name: tutsFade;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}
CSS
복사

혹은 짧게:

.element {
  animation: tutsFade 4s 1s infinite linear alternate;
}

@keyframes tutsFade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
CSS
복사

상단의 코드는 1초의 지연시간 후 4초의 총 애니메이션 길이를 가지고 loop 방향을 번갈아가면서 선형 속도로 무한 반복 깜빡거리는 효과를 만들 것입니다.

더 많은 효과는 아래의 사이트를 참고합니다!

https://developer.mozilla.org/ko/docs/Web/CSS/animation

4. Vendor Prefixes 더하기

작업 초안을 만드는동안, 우리는 브라우저에 맞는 프리픽스를 사용하여 브라우저 지원이 가능한 잘되도록 합니다. 기본 프리픽스들을 달아줍니다:

•

크롬 & 사파리: webkit-

•

파이어폭스: moz-

•

오페라: o-

•

인터넷 익스플로러: ms-

animation 속성을 벤더 프리픽스와 함께 사용하면 이렇게 됩니다:

.element {
    -webkit-animation: tutsFade 4s 1s infinite linear alternate;
    -moz-animation: tutsFade 4s 1s infinite linear alternate;
    -ms-animation: tutsFade 4s 1s infinite linear alternate;
    -o-animation: tutsFade 4s 1s infinite linear alternate;
    animation: tutsFade 4s 1s infinite linear alternate;
}
CSS
복사

@keyframes 옆에도 붙여 줍니다:

@-webkit-keyframes tutsFade {/* your style */ }
@-moz-keyframes tutsFade {/* your style */ }
@-ms-keyframes tutsFade {/* your style */ }
@-o-keyframes tutsFade {/* your style */ }
@keyframes tutsFade {/* your style */ }
CSS
복사

마지막 결과물에서는 프리픽스를 포함하고 여러분도 CSS 코드에 프리픽스를 넣는 것을 추천합니다.

<출처>

CSS 애니메이션 초보자 입문서 (https://webdesign.tutsplus.com/ko/tutorials/a-beginners-introduction-to-css-animation--cms-21068)