CSS 팟캐스트 - 022: 애니메이션
인터페이스에 클릭하면 해당 섹션에 관한 유용한 정보를 제공하는 작은 도우미가 표시되는 경우가 있습니다. 이러한 정보에는 정보가 있음을 알리고 상호작용해야 함을 은근히 알리는 맥동 애니메이션이 포함되는 경우가 많습니다. 이 모듈에서는 CSS를 사용하여 이러한 도우미와 기타 애니메이션을 만드는 방법을 보여줍니다.
CSS를 사용하여 키프레임이 포함된 애니메이션 시퀀스를 설정할 수 있습니다. 이러한 시퀀스는 기본적인 단일 상태 애니메이션이거나 복잡한 시간 기반 시퀀스일 수 있습니다.
키프레임이란 무엇인가요?
대부분의 애니메이션 도구에서 키프레임은 타임라인의 타임스탬프에 애니메이션 상태를 할당하는 데 사용하는 메커니즘입니다.
예를 들어 다음은 '도우미' 점이 깜박이는 타임라인입니다. 애니메이션은 1초 동안 실행되며 2개의 상태가 있습니다.
이러한 각 애니메이션 상태는 시작과 종료가 이루어지는 특정 지점이 있습니다. 키프레임을 사용하여 타임라인에 매핑합니다.
@keyframes
CSS @keyframes
는 애니메이션 키프레임과 동일한 개념을 기반으로 합니다.
다음은 두 상태가 있는 예입니다.
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
첫 번째로 중요한 부분은 키프레임 규칙의 이름인 맞춤 식별자 (custom-ident
)입니다. 이 예시의 식별자는 my-animation
입니다.
맞춤 식별자는 함수 이름처럼 작동하므로 CSS 코드의 다른 위치에서 키프레임 규칙을 참조할 수 있습니다.
키프레임 규칙 내에서 from
및 to
는 애니메이션의 시작과 끝인 0%
및 100%
를 나타내는 키워드입니다.
다음과 같이 동일한 규칙을 다시 만들 수 있습니다.
@keyframes my-animation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
기간에 따라 원하는 만큼 포지션을 추가할 수 있습니다. 펄싱 도우미 예시에는 두 개의 키프레임으로 변환되는 두 가지 상태가 있습니다. 즉, 키프레임 규칙 내에 이러한 각 키프레임의 변경사항을 나타내는 두 가지 위치가 있습니다.
@keyframes pulse {
0% {
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
}
animation
속성
CSS 규칙에서 @keyframes
를 사용하려면 다양한 애니메이션 속성을 개별적으로 정의하거나 animation
약어 속성을 사용하면 됩니다.
animation-duration
.my-element {
animation-duration: 10s;
}
animation-duration 속성은 @keyframes
타임라인의 길이를 시간 값으로 정의합니다.
기본값은 0초입니다. 즉, 애니메이션은 계속 실행되지만 너무 빠르게 표시되어 볼 수 없습니다. 음수 시간 값은 사용할 수 없습니다.
animation-timing-function
애니메이션에서 자연스러운 모션을 재현하려면 각 지점에서 애니메이션의 속도를 계산하는 타이밍 함수를 사용하면 됩니다. 계산된 값은 곡선형이므로 애니메이션이 animation-duration
중에 다양한 속도로 실행되고 브라우저가 @keyframes
에 정의된 값을 초과하는 값을 계산하면 요소가 튀는 것처럼 보입니다.
CSS에는 animation-timing-function의 값으로 사용되는 여러 키워드(linear
, ease
, ease-in
, ease-out
, ease-in-out
)가 사전 설정으로 제공됩니다.
.my-element {
animation-timing-function: ease-in-out;
}
이중화는 속도를 모델링하는 데 사용되는 함수 유형인 Bézier 곡선을 사용하여 계산되므로 이중화 함수 값이 곡선처럼 보입니다. 각 타이밍 함수 키워드(예: ease
)는 사전 정의된 베지어 곡선을 참조합니다. CSS에서는 cubic-bezier()
함수를 사용하여 베지어 곡선을 직접 정의할 수 있습니다. 이 함수는 x1
, y1
, x2
, y2
의 4가지 숫자 값을 허용합니다.
.my-element {
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}
이러한 값은 X축과 Y축을 따라 곡선의 각 부분을 표시합니다.
베지어 곡선을 이해하는 것은 복잡합니다. Lea Verou의 이 생성기와 같은 시각적 도구가 매우 유용합니다.
steps
이중 함수
곡선을 따라 이동하는 대신 간격을 두고 이동하여 애니메이션을 더 세부적으로 제어하고 싶을 때가 있습니다. steps()
이중 함수를 사용하면 타임라인을 동일한 길이의 정의된 간격으로 나눌 수 있습니다.
.my-element {
animation-timing-function: steps(10, end);
}
첫 번째 인수는 단계 수입니다. 키프레임의 수가 단계와 동일하면 각 키프레임은 상태 간에 전환 없이 단계의 정확한 시간 동안 순차적으로 재생됩니다. 키프레임이 단계보다 적은 경우 브라우저는 두 번째 인수에 따라 키프레임 사이에 단계를 추가합니다.
두 번째 인수는 방향입니다. 기본값인 end
로 설정된 경우 타임라인이 끝나면 단계가 완료됩니다. start
로 설정하면 애니메이션이 시작되는 즉시 첫 번째 단계가 완료됩니다. 즉, end
보다 한 단계 일찍 종료됩니다.
animation-iteration-count
.my-element {
animation-iteration-count: 10;
}
animation-iteration-count 속성은 애니메이션 중에 @keyframes
타임라인이 실행되어야 하는 횟수를 정의합니다. 기본값은 1이며, 이는 애니메이션이 타임라인의 끝에 도달하면 애니메이션이 중지된다는 것을 의미합니다. 이 값은 음수일 수 없습니다.
애니메이션 루프를 만들려면 반복 횟수를 infinite
로 설정합니다. 이 과정은 이 튜토리얼 시작 부분의 맥박 애니메이션이 작동하는 방식입니다.
animation-direction
.my-element {
animation-direction: reverse;
}
animation-direction을 사용하여 타임라인이 키프레임 위에서 실행되는 방향을 설정할 수 있습니다. 이 속성은 다음 값을 사용합니다.
normal
: 기본값으로 앞으로입니다.reverse
: 타임라인을 거꾸로 탐색합니다.alternate
: 애니메이션 반복마다 타임라인이 앞뒤로 실행되기를 번갈아 합니다.alternate-reverse
:alternate
와 같지만 타임라인이 뒤로 실행되면서 애니메이션이 시작됩니다.
animation-delay
.my-element {
animation-delay: 5s;
}
animation-delay 속성은 브라우저가 애니메이션을 시작하기 전에 대기하는 시간을 정의합니다.
animation-duration
속성과 마찬가지로 시간 값을 허용합니다.
animation-duration
과 달리 animation-delay
를 음수 값으로 정의할 수 있으며, 그러면 애니메이션이 타임라인의 해당 지점에서 시작됩니다. 예를 들어 애니메이션 길이가 10초이고 animation-delay
를 -5s
로 설정하면 애니메이션이 타임라인의 중간 지점에서 시작됩니다.
animation-play-state
.my-element:hover {
animation-play-state: paused;
}
animation-play-state 속성을 사용하면 애니메이션을 재생하고 일시중지할 수 있습니다.
기본값은 running
입니다. paused
로 설정하면 애니메이션이 일시중지됩니다.
animation-fill-mode
animation-fill-mode 속성은 애니메이션이 시작되기 전이나 종료된 후에 @keyframes
타임라인에서 유지되는 값을 정의합니다. 기본값은 none
이며, 애니메이션이 완료되면 타임라인의 값이 삭제됩니다.
그 밖에도 다음과 같은 옵션이 있습니다.
forwards
: 애니메이션 방향에 따라 마지막 키프레임이 유지됩니다.backwards
: 첫 번째 키프레임은 애니메이션 방향에 따라 유지됩니다.both
: 첫 번째 키프레임과 마지막 키프레임이 모두 유지됩니다.
animation
약어
각 속성을 개별적으로 정의하는 대신 animation
약어로 정의할 수 있습니다. 그러면 다음 순서로 애니메이션 속성을 정의할 수 있습니다.
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
.my-element {
animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}
애니메이션을 사용할 때의 고려사항
사용자는 애플리케이션 및 웹사이트와 상호작용할 때 운영체제를 감소된 모션을 선호하도록 설정할 수 있습니다. prefers-reduced-motion 미디어 쿼리를 사용하여 이 환경설정을 감지할 수 있습니다.
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
반드시 애니메이션을 사용하지 않겠다는 의미는 아닙니다. 애니메이션이 적은 것을 선호하며 특히 예상치 못한 애니메이션을 선호하지 않습니다. 이 환경설정 및 전반적인 성능에 관한 자세한 내용은 애니메이션 가이드를 참고하세요.
이해도 확인
애니메이션에 대한 지식 테스트
@keyframes
애니메이션의 이름 또는 맞춤 식별자는 대소문자를 구분하나요?
from
및 to
키워드는 다음과 같습니다.
0%
및 100%
.start
및 end
.0
및 1
animation-timing-function
는 다음과 같은 다른 이름으로도 알려져 있습니다.
@keyframes
애니메이션 내에서 필요한 최소 키프레임 수는 얼마인가요?