CSS
애니메이션

통사론

• transition: <property> <duration> <timing-function> <delay>;
• @keyframes <identifier>
• [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*

매개 변수

전환 속성이있는 애니메이션

간단한 애니메이션에 유용하게 사용되는 CSS transition 속성을 사용하면 숫자 기반 CSS 속성을 상태간에 애니메이션으로 만들 수 있습니다.

예

.Example{
    height: 100px;
    background: #fff;
}

.Example:hover{
    height: 120px;
    background: #ff0000;
}

결과보기

기본적으로 .Example 클래스를 사용하여 요소 위에 마우스를 가져 가면 요소의 높이가 즉시 120px 하고 배경색은 빨간색으로 바뀝니다 ( #ff0000 ).

transition 속성을 추가하면 시간이 지남에 따라 이러한 변경 사항이 발생할 수 있습니다.

.Example{
    ...
    transition: all 400ms ease;
}

결과보기

all 값은 모든 호환 가능한 (숫자 기반) 속성으로 전환을 적용합니다. 이 키워드는 호환 가능한 등록 정보 이름 (예 : height 또는 top )으로 대체 될 수 있습니다.

400ms 는 전환에 걸리는 시간을 지정합니다. 이 경우 요소의 높이 변경은 완료하는 데 400 밀리 초가 걸립니다.

마지막으로, 애니메이션의 재생 방식을 결정하는 애니메이션 함수가 ease 됩니다. ease 은 천천히 시작하고, 속도를 높이고, 천천히 끝내는 것을 의미합니다. 다른 값은 linear , ease-out 및 ease-in .

브라우저 간 호환성

transition 속성은 일반적으로 IE 9를 제외한 모든 주요 브라우저에서 잘 지원됩니다. 이전 버전의 Firefox 및 Webkit 기반 브라우저의 경우 다음과 같은 공급 업체 접두사를 사용하십시오.

.Example{
    transition:         all 400ms ease;
    -moz-transition:    all 400ms ease;
    -webkit-transition: all 400ms ease;
}

참고 : transition 속성은 단위에 관계없이 두 개의 숫자 값 사이의 변경 내용을 애니메이션으로 만들 수 있습니다. 100px 에서 50vh 와 같은 단위간에 전환 할 수도 있습니다. 그러나 요소의 높이를 100 100px 에서 auto 으로 전환하는 것과 같이 숫자와 기본값 또는 자동 값 사이를 전환 할 수는 없습니다.

`will-change` 속성을 사용하여 애니메이션 성능 향상시키기

애니메이션 및 기타 GPU가 많은 작업을 만들 때 will-change 속성을 이해하는 것이 중요합니다.

CSS 키 프레임과 transition 속성 모두 GPU 가속을 사용합니다. 계산을 장치의 GPU로 분산하면 성능이 향상됩니다. 이는 GPU에서 오프로드되어 계산되는 페인트 레이어 (개별적으로 렌더링되는 페이지의 일부)를 만들어서 수행됩니다. will-change 속성은 브라우저에 애니메이션 효과를 알려주므로 브라우저가 더 작은 페인트 영역을 만들어 성능을 향상시킵니다.

will-change 속성은 쉼표로 구분 된 애니메이션 속성 목록을 허용합니다. 예를 들어, 객체를 변형하고 불투명도를 변경하려는 경우 다음을 지정합니다.

.Example{
    ...
    will-change: transform, opacity;
}

참고 : 사용 will-change 조금 will-change . 브라우저에서 모든 요소에 대해 페인트 레이어를 만들려고 시도 할 수 있으므로 페이지의 모든 요소에 대한 설정 will-change 성능 문제를 일으킬 수 있으므로 GPU에서 처리하는 양이 크게 늘어납니다.

키 프레임이있는 애니메이션

다중 단계 CSS 애니메이션의 경우 CSS @keyframes 만들 수 있습니다. 키 프레임을 사용하면 키 프레임이라는 여러 애니메이션 포인트를 정의하여보다 복잡한 애니메이션을 정의 할 수 있습니다.

기본 예제

이 예제에서는 모든 색상을 순환하는 기본 배경 애니메이션을 만듭니다.

@keyframes rainbow-background {
         0%     { background-color: #ff0000; }
     8.333%     { background-color: #ff8000; }
    16.667%     { background-color: #ffff00; }
    25.000%     { background-color: #80ff00; }
    33.333%     { background-color: #00ff00; }
    41.667%     { background-color: #00ff80; }
    50.000%     { background-color: #00ffff; }
    58.333%     { background-color: #0080ff; }
    66.667%     { background-color: #0000ff; }
    75.000%     { background-color: #8000ff; }
    83.333%     { background-color: #ff00ff; }
    91.667%     { background-color: #ff0080; }
    100.00%     { background-color: #ff0000; }
}

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

결과보기

여기서 주목해야 할 몇 가지 사항이 있습니다. 먼저 실제 @keyframes 구문입니다.

@keyframes rainbow-background{

애니메이션의 이름을 rainbow-background 합니다.

0%     { background-color: #ff0000; }

이것은 애니메이션 내의 키 프레임에 대한 정의입니다. 첫 번째 부분 (이 경우 0% 은 애니메이션 중에 키 프레임의 위치를 ​​정의합니다. 0% 는 처음부터 총 애니메이션 시간의 0% 의미합니다.

애니메이션이 키 프레임간에 자동으로 전환됩니다. 따라서 다음 배경색을 8.333% 로 설정하면 애니메이션에서 해당 키 프레임 사이를 전환하는 데 8.333 %의 시간이 걸립니다.

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

이 코드는 .RainbowBackground 클래스가있는 모든 요소에 애니메이션을 첨부합니다.

실제 애니메이션 속성에는 다음 인수가 사용됩니다.

• animation-name : 우리 애니메이션의 이름. 이 경우 rainbow-background
• animation-duration : 애니메이션에 걸리는 시간.이 경우 5 초.
• animation-iteration-count (선택 사항) : 애니메이션이 반복 되는 횟수입니다. 이 경우, 애니메이션은 무한정 지속됩니다. 기본적으로 애니메이션은 한 번 재생됩니다.
• animation-delay (선택 사항) : 애니메이션이 시작되기까지 대기 할 시간을 지정합니다. 기본값은 0 초이며 음수 값을 사용할 수 있습니다. 예를 들어, -2s 그 루프에 애니메이션 2 초 시작합니다.
• animation-timing-function (옵션) : 애니메이션의 속도 곡선을 지정합니다. 기본적으로 ease . 애니메이션이 느리게 시작되고 속도가 빨라지고 느리게 종료됩니다.

이 특정 예에서 0% 및 100% 키 프레임은 모두 { background-color: #ff0000; } . 두 개 이상의 키 프레임이 하나의 상태를 공유 할 때마다 단일 명령문에서이를 지정할 수 있습니다. 이 경우 두 개의 0% 및 100% 줄을이 한 줄로 바꿀 수 있습니다.

0%, 100%     { background-color: #ff0000; }

브라우저 간 호환성

이전 WebKit 기반 브라우저의 경우 다음과 같이 @keyframes 선언과 animation 속성 모두에 대한 공급 업체 접두사를 사용해야합니다.

@-webkit-keyframes{}

-webkit-animation: ...

구문 예제

첫 번째 구문 예제는 사용 가능한 모든 속성 / 매개 변수를 사용하는 애니메이션 속기 속성을 보여줍니다.

  animation: 3s         ease-in           1s      2                 reverse     both        paused       slidein;
  /*         duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name   */

우리의 두 번째 예제는 좀 더 간단하며, 몇 가지 속성을 생략 할 수 있음을 보여줍니다.

  animation: 3s         linear            1s      slidein;
  /*         duration | timing-function | delay | name   */

우리의 세 번째 예제는 가장 최소한의 선언을 보여줍니다. animation-name과 animation-duration은 다음과 같이 선언해야합니다.

  animation: 3s         slidein;
  /*         duration | name */

또한 애니메이션 약어를 사용할 때 속성의 순서가 차이가 있음을 언급 할 필요가 있습니다. 분명히 브라우저가 지연 시간과 혼동을 줄 수 있습니다.

간결함이 당신의 것이 아니라면, 속기 속성을 건너 뛰고 각 속성을 개별적으로 쓸 수 있습니다 :

animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: reverse;
animation-fill-mode: both;
animation-play-state: paused;
animation-name: slidein;