애니메이션은 상호작용 요소를 강조 표시하고 흥미를 더할 수 있는 좋은 방법입니다. 디자인에 재미를 더해 줄 수 있습니다. 이 모듈에서는 애니메이션을 적용할 수 있습니다.
때로는 유용한 기능을 제공하는 인터페이스에 작은 도우미가 나타나기도 합니다. 해당 섹션에 대한 정보를 볼 수 있습니다. 이러한 엔드포인트에는 보통 깜빡이는 애니메이션을 통해 정보가 전달되고 있음을 알리고 상호작용해야 합니다 이 모듈에서는 CSS
CSS를 사용하여 키프레임으로 애니메이션 순서를 설정할 수 있습니다. 이러한 시퀀스는 기본 단일 상태 애니메이션 또는 복잡한 시간 기반 시퀀스일 수 있습니다.
키프레임이란 무엇인가요?
대부분의 애니메이션 도구에서 키프레임은 애니메이션을 할당하는 데 사용하는 메커니즘입니다. 타임스탬프로 변환할 수 있습니다.
예를 들어 깜빡이는 '도우미' 타임라인은 다음과 같습니다. . 애니메이션이 실행됩니다. 2개의 상태가 있습니다
<ph type="x-smartling-placeholder">이러한 각 애니메이션 상태가 시작되고 끝나는 특정 지점이 있습니다. 키프레임을 사용하여 타임라인에 매핑합니다.
<ph type="x-smartling-placeholder">@keyframes
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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);
}
}
기간별로 원하는 만큼 위치를 추가할 수 있습니다. 깜박이는 도우미 예시에서는 2로 변환되는 두 개의 상태가 있습니다. 맞춤설정할 수 있습니다. 즉, 키프레임 규칙 내에 두 개의 위치가 있으면 각 키프레임의 변경사항을 나타냅니다.
@keyframes pulse {
0% {
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
}
animation
속성
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
CSS 규칙에서 @keyframes
를 사용하려면 다양한 애니메이션을 정의할 수 있습니다.
속성을 개별적으로 사용하거나 animation
약식 속성으로 사용됩니다.
animation-duration
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.my-element {
animation-duration: 10s;
}
animation-duration
속성은 @keyframes
타임라인의 길이를 시간 값으로 정의합니다.
기본값은 0초입니다. 즉, 애니메이션이 계속 실행되지만
볼 수 있습니다. 시간 값은 음수일 수 없습니다.
animation-timing-function
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
애니메이션에서 자연스러운 모션을 재현하려면
각 지점의 애니메이션 속도를 계산할 수 있습니다. 계산된 값은 종종
곡선: 애니메이션이 진행되는 동안 가변 속도로
animation-duration
를 사용하며, 브라우저가
@keyframes
에 정의된 값 이외의 값을 계산합니다.
CSS에는 사전 설정으로 사용할 수 있는 여러 키워드가 있으며, 이러한 키워드는
animation-timing-function:
linear
, ease
, ease-in
, ease-out
, ease-in-out
.my-element {
animation-timing-function: ease-in-out;
}
이징은
베지어 곡선, 속도를 모델링하는 데 사용되는 함수 유형 각 타이밍은
함수 키워드(예: ease
)는 사전 정의된 베지어 곡선을 참조합니다. CSS에서는
cubic-bezier()
함수를 사용하여 베지어 곡선을 직접 정의할 수 있습니다.
네 개의 숫자 값(x1
, y1
, x2
, y2
)을 허용합니다.
.my-element {
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}
이러한 값은 X축 및 Y축을 따라 곡선의 각 부분을 표시합니다.
<ph type="x-smartling-placeholder">베지어 곡선을 이해하는 것은 복잡합니다. 다음과 같은 시각적 도구 생성기가 도움이 되었습니다.
steps
이징 함수
애니메이션을 좀 더 세밀하게 제어하고 싶을 때가 있습니다.
곡선을 따라 이동하는 대신 간격으로 이동하게 됩니다. steps()
이징 함수를 사용하면
타임라인을 동일한 기간의 지정된 간격으로 나눕니다.
.my-element {
animation-timing-function: steps(10, end);
}
첫 번째 인수는 숫자 단계입니다. 동일한 수의 단계인 경우 각 키프레임은 상태 간 전환이 없는 단계입니다. 단계보다 키프레임 수가 적으면 브라우저에서 단계 사이에 단계를 추가합니다. 키프레임을 조정할 수 있습니다.
두 번째 인수는 방향입니다. end
로 설정된 경우
기본적으로 타임라인이 끝날 때 단계가 완료됩니다. start
로 설정된 경우
애니메이션의 첫 번째 단계가 시작되자마자 완료됩니다. 즉,
end
보다 한 단계 빨리 종료됩니다.
animation-iteration-count
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.my-element {
animation-iteration-count: 10;
}
animation-iteration-count
속성은 @keyframes
타임라인이 실행되어야 하는 횟수를
애니메이션을 적용할 수 있습니다. 기본적으로 1로, 애니메이션이 시작되었을 때 애니메이션이 중지된다는 뜻입니다.
타임라인의 끝에 도달합니다. 이 값은 음수일 수 없습니다.
애니메이션을 반복하려면 반복 횟수를 infinite
로 설정합니다. 이렇듯
깜박이는 애니메이션이 효과가 있습니다.
animation-direction
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.my-element {
animation-direction: reverse;
}
키프레임에서 타임라인을 실행할 방향을 설정할 수 있습니다. animation-direction, 이 함수는 다음 값을 사용합니다.
normal
: 기본값이며 정방향입니다.reverse
: 타임라인에서 역방향으로 실행됩니다.alternate
: 애니메이션이 반복될 때마다 타임라인이 앞뒤로 실행할 수 있습니다alternate-reverse
:alternate
와 같지만, 애니메이션은 타임라인이 있습니다
animation-delay
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.my-element {
animation-delay: 5s;
}
animation-delay
속성은 브라우저가 애니메이션을 시작하기 전에 대기하는 시간을 정의합니다.
animation-duration
속성과 마찬가지로 이 속성은 시간 값을 사용합니다.
animation-duration
와 달리 animation-delay
를 음수로 정의할 수 있습니다.
값을 사용하여 애니메이션이 시작되어야 하는 지점에서
확인할 수 있습니다 예를 들어 애니메이션 길이가 10초이고
animation-delay
를 -5s
로 변경하면 애니메이션이
확인할 수 있습니다
animation-play-state
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
.my-element:hover {
animation-play-state: paused;
}
animation-play-state
속성을 사용하면 애니메이션을 재생 및 일시중지할 수 있습니다.
기본값은 running
입니다. paused
로 설정하면 애니메이션이 일시중지됩니다.
animation-fill-mode
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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;
}
}
이 옵션은 애니메이션이 없는 경우의 환경설정이 아닙니다. 더 적은 것을 선호함 특히 덜 예기치 않은 애니메이션을 사용해야 합니다 GNI의 웹사이트인 g.co/newsinitiative에서 전반적인 실적은 애니메이션 가이드를 참조하세요.
이해도 확인
애니메이션에 관한 지식 테스트
@keyframes
애니메이션의 이름 또는 맞춤 식별자는 대소문자를 구분하나요?
키워드 from
및 to
는 다음과 동일합니다.
0%
및 100%
.start
및 end
.0
및 1
animation-timing-function
는 일반적으로 다음과 같이 알려져 있습니다.
@keyframes
애니메이션 내에 필요한 최소 키프레임 수는 몇 개인가요?