- A->B 가 아닌 A-B-C-D로 반복되는 효과를 만듬
- keyframe으로 애니메이션을 만들고 참조해서 사용한다.
CSS Animation은 CSS를 사용하여 HTML 요소에 애니메이션 효과를 적용하는 기술입니다. CSS 애니메이션은 간단한 움직임에서부터 복잡한 애니메이션까지 다양한 효과를 만들어 낼 수 있습니다.
CSS Animation은 다음과 같은 속성을 사용합니다:
- animation-name: 애니메이션을 정의하는 keyframes 이름을 지정합니다.
- animation-duration: 애니메이션의 지속 시간을 초 단위로 지정합니다. 음수값 x. 하나의 애니메이션 세트가 작동되는 시간
- animation-timing-function: 애니메이션의 타이밍 함수를 지정합니다. 기본값은 "ease"입니다.
- animation-delay: 애니메이션 시작 전 지연 시간을 초 단위로 지정합니다. 기본값은 0초입니다. 음수값 O
- animation-iteration-count: 애니메이션의 반복 횟수를 지정합니다. 기본값은 1회입니다.
- animation-direction: 애니메이션의 방향을 지정합니다. "normal"은 정방향, "reverse"는 역방향, "alternate"는 정방향과 역방향을 번갈아가며 반복합니다.
- animation-fill-mode: 애니메이션이 시작하기 전과 끝나고 난 후의 요소의 상태를 지정합니다.
- animation-play-state: 애니메이션의 실행 상태를 지정합니다. "paused"는 일시 중지 상태, "running"은 실행 상태입니다. 기본값 2개밖에 없음. 기본값은 running.
CSS Animation은 다양한 애니메이션 효과를 만드는 데 사용됩니다. 예를 들어, 회전, 이동, 크기 조정, 색상 변경 등 다양한 효과를 만들어 낼 수 있습니다. 또한, CSS Animation은 JavaScript를 사용하지 않고도 애니메이션을 만들 수 있어서 성능이 우수하고 코드가 간결해집니다.
Keyframes는 애니메이션의 시작부터 끝까지 요소의 모든 상태를 정의합니다. 요소의 속성 값은 애니메이션 중에 지정된 각각의 keyframes에서 설정됩니다.
keyframes는 @keyframes 규칙을 사용하여 정의하며 다음과 같은 구조를 가집니다
@keyframes animation-name {
from {
/* 시작점에서 요소의 속성 값을 정의합니다. */
}
to {
/* 끝점에서 요소의 속성 값을 정의합니다. */
}
}또는, 시작과 끝점이 아닌 중간 지점의 요소 상태를 정의할 수도 있습니다.
@keyframes animation-name {
0% {
/* 시작 지점에서 요소의 속성 값을 정의합니다. */
}
50% {
/* 중간 지점에서 요소의 속성 값을 정의합니다. */
}
100% {
/* 끝 지점에서 요소의 속성 값을 정의합니다. */
}
}Keyframes를 정의하면, 애니메이션 속성에 animation-name 값을 할당하여 애니메이션을 실행합니다.
Keyframes는 요소의 위치, 크기, 회전 등의 다양한 속성 값을 변경할 수 있으므로 CSS 애니메이션의 다양한 효과를 만들 수 있습니다. 예를 들어, 요소가 회전하거나 움직이는 효과, 요소의 투명도가 변경되는 효과, 색상이 변경되는 효과 등이 있습니다.
Syntax
/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slidein;
/* two animations */
animation: 3s linear slidein, 3s ease-out 5s slideout;
Aspiring Front-end Developer