CSS 애니메이션 튜토리얼: 초보자를 위한 완벽한 가이드

이것은 초보자를 위한 전체 구문 가이드 및 대화형 CSS 애니메이션 자습서입니다. CSS 애니메이션 사양의 다른 부분을 배우기 위한 참조로 사용하십시오.

브라우저 성능은 지난 10년 동안 많은 발전을 이루었습니다. 렌더링 및 성능 문제의 가능성으로 인해 웹 페이지에 대화형 애니메이션을 추가하는 것이 훨씬 더 어려웠습니다. 그러나 요즘에는 CSS 애니메이션을 훨씬 더 자유롭게 사용할 수 있으며 일반적으로 그리드나 플렉스박스와 같은 CSS 기능에 비해 구문이 훨씬 배우기 쉽습니다.

W3C CSS 애니메이션 사양의 일부인 다양한 기능이 있습니다. 일부는 다른 것보다 사용하기 쉽습니다. 이 CSS 키프레임 애니메이션 튜토리얼에서는 각기 다른 속성을 포함하여 모든 구문을 살펴봅니다. CSS 애니메이션으로 가능한 것을 이해하는 데 도움이 되는 대화형 데모를 포함하겠습니다.

@keyframes 구문

모든 CSS 애니메이션에는 두 부분이 있습니다. @keyframes 규칙을 사용하여 정의된 애니메이션 키프레임 세트와 함께 하나 이상의 animation-* 속성. @keyframes 규칙 집합을 구축하는 데 필요한 사항을 자세히 살펴보겠습니다.

구문은 다음과 같습니다.

 @keyframes moveObject 0% transform: translateX(0); 50% transform: translateX(300px); 100% transform: translateX(300px) scale(1.5);

여기에 표시된 대로 @keyframes at-rule에는 세 가지 기본 부분이 포함됩니다.

• @keyframes 규칙 뒤에 맞춤 애니메이션 이름이 옵니다.
• 모든 키프레임을 감싸는 중괄호 세트
• 중괄호로 묶인 규칙 세트가 뒤따르는 백분율이 있는 하나 이상의 키프레임

CSS 애니메이션 튜토리얼의 첫 번째 예에서 moveObject 라는 이름으로 애니메이션을 정의했습니다. 이것은 내가 원하는 이름이 될 수 있고 대소문자를 구분하며 CSS의 사용자 정의 식별자 규칙을 따라야 합니다. 이 사용자 정의 이름은 animation-name 속성에 사용된 이름과 일치해야 합니다(나중에 설명).

내 예에서 애니메이션의 각 키프레임을 정의하기 위해 백분율을 사용했음을 알 수 있습니다. 내 애니메이션에 0% 및 100% 인 키프레임이 포함되어 있으면 from 및 to 키워드를 대신 사용할 수 있습니다.

 @keyframes moveObject from transform: translateX(0); 50% transform: translateX(300px); to transform: translateX(300px) scale(1.5);

다음 대화형 CodePen은 라이브 예제에서 위의 구문을 사용합니다.

데모에는 애니메이션을 재설정하는 버튼이 포함되어 있습니다. 이것이 필요한 이유는 나중에 설명하겠습니다. 그러나 지금은 이 애니메이션에 이 애니메이션 시퀀스의 단계를 나타내는 세 개의 키프레임, 즉 시작, 50% 단계 및 끝(즉, 0%, 50% 및 100%)이 포함되어 있다는 점만 알아두십시오. 이들 각각은 중괄호와 함께 키프레임 선택기를 사용하여 해당 단계에서 속성을 정의합니다.

@keyframes 구문에 대해 주의해야 할 사항:

• 키프레임 규칙 세트를 원하는 순서로 배치할 수 있으며 브라우저는 여전히 백분율로 결정된 순서대로 실행합니다.
• 0% 및 100% 키프레임을 생략할 수 있으며 브라우저는 애니메이션되는 요소의 기존 스타일에 따라 자동으로 결정합니다.
• 다른 규칙 세트를 가진 중복 키프레임이 있는 경우(예: 다른 변환 값을 가진 20%에 대한 두 개의 키프레임) 브라우저는 마지막 키프레임을 사용합니다.
• 쉼표를 사용하여 단일 키프레임 선택기에서 여러 키프레임을 정의할 수 있습니다. 10%, 30% ...
• !important 키워드는 모든 속성 값을 무효화하므로 키프레임 규칙 집합 내의 속성에 사용해서는 안 됩니다.

이제 이 CSS 애니메이션 자습서에서 @keyframes 구문을 잘 이해했으므로 애니메이션되는 요소에 정의된 다양한 애니메이션 속성을 살펴보겠습니다.

다룰 애니메이션 속성:

animation-name 속성

언급했듯이, 생성하는 모든 CSS 애니메이션에는 @keyframes 구문에 나타나는 이름이 있어야 합니다. 이 이름은 animation-name 속성을 사용하여 정의한 이름과 동일해야 합니다.

이전 데모의 CSS를 사용하면 구문은 다음과 같습니다.

 .box animation-name: moveObject;

다시 말하지만, 내가 정의한 사용자 지정 이름은 @keyframes at-rule의 이름으로도 존재해야 합니다. 그렇지 않으면 이 이름은 아무 작업도 수행하지 않습니다. 이것을 JavaScript의 함수 호출과 같이 생각할 수 있습니다. 함수 자체는 코드의 @keyframes moveObject 부분이고 함수 호출은 animation-name: moveObject 입니다.

animation-name 에 대해 염두에 두어야 할 몇 가지 사항:

• animation-name 의 초기 값은 none 이며, 이는 활성 키프레임이 없음을 의미합니다. 이것은 애니메이션을 비활성화하는 일종의 '토글'로 사용할 수 있습니다.
• 선택한 이름은 대소문자를 구분하며 문자, 숫자, 밑줄 및 하이픈을 포함할 수 있습니다.
• 이름의 첫 번째 문자는 문자 또는 하이픈이어야 하지만 하이픈은 하나만 사용해야 합니다.
• 이름은 unset , initial 또는 inherit 와 같은 예약어일 수 없습니다.

animation-duration 속성

animation-duration 속성은 당연하게도 애니메이션이 처음부터 끝까지 한 번 실행되는 데 걸리는 시간을 정의합니다. 이 값은 아래와 같이 초 또는 밀리초 단위로 지정할 수 있습니다.

 .box animation-duration: 2s;

위의 내용은 다음과 동일합니다.

 .box animation-duration: 2000ms;

다음 CodePen 데모에서 animation-duration 속성이 작동하는 것을 볼 수 있습니다. 이 데모에서는 애니메이션 지속 시간을 선택할 수 있습니다. 초 또는 밀리초 단위로 다양한 값을 입력한 다음 "상자 애니메이션" 버튼을 사용하여 애니메이션을 실행합니다.

단위에 ms 와 함께 작은 숫자를 사용하면 움직임을 감지하지 못할 수도 있습니다. 밀리초를 사용하는 경우 더 높은 숫자를 설정해 보십시오.

animation-duration 사용에 대한 몇 가지 참고 사항:

• 음수 값이 잘못되었습니다.
• 지속시간이 0s 초(초기값)로 설정되어 있어도 단위를 포함해야 함
• 분수 값(예: 0.8s )을 사용할 수 있습니다.

animation-timing-function 속성

이전 두 속성만큼 의미가 명확하지 않은 animation-timing-function 은 CSS 애니메이션이 진행되는 방식을 정의하는 데 사용됩니다. 이것이 가장 명확한 설명은 아니지만 구문이 명확하게 하는 데 도움이 될 수 있습니다.

선언은 다음과 같습니다.

 .box animation-timing-function: linear;

이 속성은 다음 키워드 값을 허용합니다.

• ease (초기값)
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end

대부분의 값은 이름으로 비교적 쉽게 파악할 수 있지만 다음 대화식 데모를 사용하여 값이 어떻게 다른지 확인할 수 있습니다.

선택 입력을 사용하여 7개의 키워드 값 중 하나를 선택하십시오. ease-* 는 다양한 방식으로 애니메이션을 'easy' 값으로 지정합니다. 선형 값은 끝까지 일관됩니다.

animation-timing-function 속성은 다음 함수도 허용합니다.

• cubic-bezier() – 쉼표로 구분된 4개의 숫자 값을 인수로 허용
• steps() – 쉼표로 구분된 숫자와 "점프 용어"의 두 값을 인수로 허용합니다.

키워드 값 step-start 및 step-end 는 각각 값 steps(1, jump-start) 및 steps(1, jump-end) 와 동일합니다.

cubic-bezier() 의 경우 다음 대화식 데모가 함수를 조금 더 잘 이해하는 데 도움이 될 수 있습니다.

이 데모를 통해 cubic-bezier() 함수에서 4개의 인수를 설정할 수 있습니다. 인수 중 2개는 음수일 수 있고 2개는 0과 1 사이의 10진수 값으로 제한됩니다. 이러한 유형의 타이밍 기능이 작동하는 방식에 대한 적절한 설명은 이 기사 또는 이 대화형 도구를 참조하세요.

반면, steps() 함수는 두 개의 인수를 받습니다.

• 애니메이션의 단일 주기를 따라 동일한 "중지"를 나타내는 정수입니다.
• 애니메이션이 특정 간격으로 "유지"되는지 여부를 결정하는 "점프텀"이라는 선택적 키워드

다시 말하지만, 대화식 데모는 이러한 점프 용어가 어떻게 작동하는지 이해하는 데 도움이 될 것입니다.

다른 키워드가 다른 정수 값과 어떻게 다른지 보려면 jumpterm과 함께 정수를 선택하거나 jumpterm 없이 시도하십시오. 분명히 음수 정수는 허용되지만 0과 음수 값 사이에는 차이가 없습니다.

animation-iteration-count 속성

어떤 경우에는 애니메이션이 한 번 실행되면 만족할 수 있지만 때로는 애니메이션이 여러 번 실행되기를 원할 수도 있습니다. animation-iteration-count 속성을 사용하면 애니메이션을 실행하려는 횟수를 나타내는 양수를 수락하여 이를 수행할 수 있습니다.

 .box animation-iteration-count: 3;

animation-iteration-count 의 초기 값은 1 이지만 키워드 infinite (자체 설명)을 사용하거나 소수 값을 사용할 수도 있습니다. 분수 값은 분수 실행에서 애니메이션을 일부 실행합니다.

 .box animation-iteration-count: 3.5;

위의 코드는 애니메이션을 3.5회 실행합니다. 즉, 3번의 완전한 반복 다음에 정확히 중간에 멈추는 1번의 최종 반복입니다.

이 속성은 처음부터 실행되는 애니메이션이 두 번 이상 실행되는 경우에는 그다지 유용하지 않기 때문에 animation-direction 속성(다음에 설명)과 함께 사용할 때 가장 유용합니다.

반복 횟수에 대한 분수 값을 선택할 수 있는 아래 데모를 시도하여 효과를 확인할 수 있습니다.

애니메이션 방향 속성

이 CSS 애니메이션 튜토리얼에서 위에서 언급했듯이 animation-direction 속성은 animation-iteration-count 와 함께 잘 작동합니다. animation-direction 속성을 사용하면 애니메이션을 재생할 방향을 정의할 수 있습니다. 구문은 다음과 같습니다.

 .box animation-direction: alternate;

값을 다음 네 가지 키워드 중 하나로 설정할 수 있습니다.

• normal – 애니메이션이 첫 번째 반복에서 앞으로 재생됩니다(기본값).
• reverse – 애니메이션은 첫 번째 반복에서 뒤로 재생됩니다.
• alternate – 애니메이션은 첫 번째 반복에서 앞으로 재생되고 후속 반복에서 번갈아 재생됩니다.
• alternate-reverse – alternate 와 동일하지만 첫 번째 반복에서 뒤로 재생

아래의 대화식 데모를 사용하여 다른 반복 횟수로 다른 값을 시험해 볼 수 있습니다.

animation-play-state 속성

animation-play-state 속성은 정적 CSS 환경에서는 그다지 유용하지 않지만 JavaScript 또는 CSS를 통해 대화형 애니메이션을 작성할 때 유용할 수 있습니다.

이 속성은 running 또는 paused 의 두 가지 값을 허용합니다.

 .box animation-direction: paused;

기본적으로 주어진 애니메이션은 "실행 중" 상태입니다. 그러나 JavaScript를 사용하여 속성 값을 전환할 수 있습니다. :hover 또는 :focus 와 같은 대화형 CSS 기능을 사용하여 애니메이션을 "일시 중지된" 상태로 변경할 수도 있습니다. 이 상태는 현재 반복되는 모든 위치에서 기본적으로 애니메이션을 정지시킵니다.

아래 대화형 데모에는 애니메이션을 "일시 중지" 및 "재개"하는 두 개의 버튼으로 무한히 실행되는 애니메이션이 있습니다.

애니메이션 지연 속성

일부 애니메이션은 즉시 애니메이션을 시작하도록 설계되었지만, 다른 애니메이션은 첫 번째 반복 전에 약간의 지연이 있는 이점이 있습니다. animation-delay 속성을 사용하면 이를 수행할 수 있습니다.

 .box animation-delay: 4s;

다른 시간 기반 값과 마찬가지로 animation-delay 를 초 또는 밀리초를 사용하는 값으로 설정할 수 있습니다. 분수 값을 사용할 수도 있습니다.

지연은 각 반복이 아니라 첫 번째 반복에서만 발생한다는 점에 유의하는 것이 중요합니다. 아래 대화형 데모를 사용하여 시도해 볼 수 있습니다.

데모는 반복 값과 지연을 변경할 수 있는 옵션을 제공하므로 지연이 후속 반복에 영향을 미치지 않고 첫 번째 반복에만 영향을 주는 것을 확인할 수 있습니다.

이 속성을 사용하는 흥미로운 방법은 음수 값을 사용하는 것입니다. 예를 들어 위의 데모를 사용하여 animation-delay 를 -0.5s 로 설정해 보십시오. 네거티브 딜레이는 타임머신을 타고 앞으로 가는 것처럼 작동합니다. 애니메이션은 처음이 아니라 중간에 시작됩니다.

animation-fill-mode 속성

이 CSS 애니메이션 튜토리얼에서 다룰 마지막 장편 속성은 이전 데모에서 사용한 속성입니다. 애니메이션이 최종 반복을 중지할 때 상자가 원래 위치에 남아 있음을 알 수 있습니다. 이것은 animation-fill-mode 를 사용하여 수행됩니다.

 .box animation-fill-mode: forwards;

이 속성은 애니메이션이 실행 전후에 대상 요소에 스타일을 적용하는 방법을 설정합니다. 개념적으로 이해하기가 조금 어렵기 때문에 각 값의 의미를 다루겠습니다. 그런 다음 대화식 데모를 사용하여 값을 비교할 수 있습니다.

이 속성은 다음 네 가지 키워드 값을 허용합니다.

• none – 기본값, 실행 전후에 적용된 스타일 없음
• forwards – 애니메이션의 마지막 키프레임에 적용된 모든 스타일을 유지합니다.
• backwards – 이전 값과 거의 반대로 실행을 시작하는 즉시 애니메이션이 시작되기 전에 애니메이션에 적용된 스타일을 유지합니다.
• both - forwards 및 backwards 모두 스타일을 유지합니다.

이 CSS 애니메이션 튜토리얼의 마지막 데모는 상황을 좀 더 명확하게 만들 것이지만, 이 데모가 실제로 무엇을 하고 어떻게 달성하는지 이해하기 전에 많은 시간을 들여야 할 것입니다.

편의를 위해 모든 데모를 단일 CodePen 컬렉션에 추가했습니다.

데모에서는 채우기 모드, 지연, 방향 및 반복 횟수를 조정할 수 있습니다. 이 모든 것이 모양에 영향을 줄 수 있기 때문입니다. 또한 첫 번째 키프레임의 애니메이션 상자에 다른 배경색을 추가했는데, 이는 채우기 모드 값을 좀 더 명확하게 만드는 데 도움이 됩니다. 여전히 animation-fill-mode 가 어떻게 작동하는지 잘 모르겠다면, animation-fill-mode 에 대해 자세히 설명하는 이전 기사를 확인하세요.

애니메이션 속기 속성

나는 초보자를 위한 이 CSS 애니메이션 튜토리얼에서 8가지 다른 속성을 다루었으며 긴 손을 사용하는 것이 좋습니다. 이렇게 하면 명시적 값 세트를 더 쉽게 볼 수 있습니다.

각 속성을 잘 이해하면 animation 속기 속성을 사용할 수 있습니다. 이 속성을 사용하면 단일 선언에서 모든 장편 속성을 정의할 수 있습니다.

 .box animation: moveObject 2s ease-in-out 3 reverse running 1.3s forwards;

솔직히 말해서 한 줄에 많은 정보가 있습니다. 선언에 모든 ​​속성이 포함되어 있지 않고 그 중 3~4개만 포함되어 있으면 약식을 사용하는 것이 좋습니다.

속기를 사용하는 경우 원하는 순서대로 값을 입력할 수 있지만 다음 규칙에 유의하세요.

• 시간을 정의하는 첫 번째 값은 animation-duration 입니다. 모든 후속 시간 값은 animation-delay 입니다.
• 키워드와 animation-name 사이에 충돌이 있는 경우 키워드 값이 먼저 나타나면 우선합니다.
• 생략된 값은 CSS 약식 속성과 마찬가지로 초기 상태로 되돌아갑니다.

단일 요소에 여러 애니메이션 적용

알아두면 좋은 마지막 기능 중 하나는 애니메이션을 쉼표로 구분하여 단일 개체에 여러 애니메이션을 적용할 수 있는 옵션이 있다는 것입니다.

다음은 약어를 사용한 예입니다.

 .box animation: moveObject 2s ease-in-out, fadeBox 3s linear;

여기서는 두 개의 다른 키프레임 세트에 매핑되지만 동일한 개체에 적용되는 두 개의 다른 애니메이션을 정의했습니다. 동일한 코드를 다음과 같이 장황하게 작성할 수 있습니다.

 .box animation-name: moveObject, fadeBox; animation-duation: 2s, 3s; animation-timing-function: ease-in-out, linear;

각 속성에 쉼표로 구분된 두 개의 값이 어떻게 포함되어 있는지 확인하십시오. 이 경우 속기는 거의 확실히 읽고 유지하기가 더 쉬울 것입니다.

이 CSS 애니메이션 튜토리얼 마무리하기

마지막 경고: 애니메이션을 적당히 사용하고 일부 웹 사용자는 깜박이는 색상 및 기타 빠르게 움직이는 개체로 인해 부정적인 영향을 받을 수 있음을 기억하십시오.