CSS 애니메이션
CSS 애니메이션
CSS는 JavaScript나 Flash를 사용하지 않고 HTML 요소의 애니메이션을 허용합니다!
이 장에서는 다음 속성에 대해 배웁니다.
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
애니메이션에 대한 브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Property | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
CSS 애니메이션이란 무엇입니까?
애니메이션을 사용하면 요소를 한 스타일에서 다른 스타일로 점진적으로 변경할 수 있습니다.
원하는 만큼 CSS 속성을 원하는 만큼 변경할 수 있습니다.
CSS 애니메이션을 사용하려면 먼저 애니메이션에 대한 몇 가지 키프레임을 지정해야 합니다.
키프레임은 특정 시간에 요소의 스타일을 유지합니다.
@keyframes 규칙
규칙 내에서 CSS 스타일을 지정 @keyframes
하면 애니메이션이 특정 시간에 현재 스타일에서 새 스타일로 점차 변경됩니다.
애니메이션을 작동시키려면 애니메이션을 요소에 바인딩해야 합니다.
다음 예제는 "example" 애니메이션을 <div> 요소에 바인딩합니다. 애니메이션은 4초 동안 지속되며 <div> 요소의 배경색이 "빨간색"에서 "노란색"으로 점차 변경됩니다.
예시
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
참고: 속성 animation-duration은 애니메이션을 완료하는 데 걸리는 시간을 정의합니다. 속성을 지정하지 않으면 animation-duration기본값이 0초(0초)이므로 애니메이션이 발생하지 않습니다.
위의 예에서 "from" 및 "to"(0%(시작) 및 100%(완료)를 나타냄) 키워드를 사용하여 스타일이 변경되는 시기를 지정했습니다.
백분율을 사용하는 것도 가능합니다. 백분율을 사용하여 원하는 만큼 스타일 변경 사항을 추가할 수 있습니다.
다음 예제는 애니메이션이 25% 완료되었을 때, 50% 완료되었을 때, 그리고 애니메이션이 100% 완료되었을 때 다시 <div> 요소의 배경색을 변경합니다.
예시
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
다음 예제는 애니메이션이 25% 완료되었을 때, 50% 완료되었을 때, 그리고 애니메이션이 100% 완료되었을 때 배경색과 <div> 요소의 위치를 모두 변경합니다.
예시
/* The animation code */
@keyframes example
{
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
애니메이션 지연
속성 은 animation-delay애니메이션 시작에 대한 지연을 지정합니다.
다음 예제에는 애니메이션을 시작하기 전에 2초 지연이 있습니다.
예시
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
음수 값도 허용됩니다. 음수 값을 사용하면 애니메이션이 N 초 동안 이미 재생된 것처럼 시작됩니다 .
다음 예에서 애니메이션은 이미 2초 동안 재생된 것처럼 시작됩니다.
예시
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
애니메이션 실행 횟수 설정
속성 은 animation-iteration-count애니메이션이 실행되어야 하는 횟수를 지정합니다.
다음 예제에서는 애니메이션이 중지되기 전에 애니메이션을 3번 실행합니다.
예시
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
다음 예제에서는 "infinite" 값을 사용하여 애니메이션이 영원히 계속되도록 합니다.
예시
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
}
역방향 또는 대체 사이클로 애니메이션 실행
속성 은 animation-direction애니메이션을 앞으로, 뒤로 또는 번갈아 재생해야 하는지 여부를 지정합니다.
animation-direction 속성은 다음 값을 가질 수 있습니다.
normal- 애니메이션은 정상적으로(앞으로) 재생됩니다. 이것은 기본값입니다reverse- 애니메이션이 역방향(역방향)으로 재생됩니다.alternate- 애니메이션이 먼저 앞으로 재생된 다음 뒤로 재생됩니다.alternate-reverse- 애니메이션이 먼저 뒤로 재생된 다음 앞으로 재생됩니다.
다음 예제에서는 애니메이션을 역방향(역방향)으로 실행합니다.
예시
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction:
reverse;
}
다음 예제에서는 "alternate" 값을 사용하여 애니메이션을 먼저 앞으로 실행한 다음 뒤로 실행합니다.
예시
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate;
}
다음 예제에서는 "alternate-reverse" 값을 사용하여 애니메이션을 먼저 뒤로 실행한 다음 앞으로 실행합니다.
예시
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate-reverse;
}
애니메이션의 속도 곡선 지정
animation-timing-function속성은 애니메이션의 속도 곡선을 지정합니다 .
animation-timing-function 속성은 다음 값을 가질 수 있습니다.
ease- 느린 시작, 빠른 시작, 느린 종료로 애니메이션을 지정합니다(기본값).linear- 처음부터 끝까지 같은 속도로 애니메이션을 지정합니다.ease-in- 느린 시작으로 애니메이션을 지정합니다.ease-out- 느린 끝이 있는 애니메이션을 지정합니다.ease-in-out- 시작과 끝이 느린 애니메이션을 지정합니다.cubic-bezier(n,n,n,n)- 3차 베지어 함수에서 고유한 값을 정의할 수 있습니다.
다음 예는 사용할 수 있는 몇 가지 다른 속도 곡선을 보여줍니다.
예시
#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;}
애니메이션의 채우기 모드 지정
CSS 애니메이션은 첫 번째 키프레임이 재생되기 전이나 마지막 키프레임이 재생된 후에 요소에 영향을 주지 않습니다. animation-fill-mode 속성은 이 동작을 재정의할 수 있습니다.
속성 은 animation-fill-mode애니메이션이 재생되지 않을 때(시작 전, 종료 후 또는 둘 다) 대상 요소의 스타일을 지정합니다.
animation-fill-mode 속성은 다음 값을 가질 수 있습니다.
none- 기본값. 애니메이션은 실행 전후에 요소에 스타일을 적용하지 않습니다.forwards- 요소는 마지막 키프레임에 의해 설정된 스타일 값을 유지합니다(animation-direction 및 animation-iteration-count에 따라 다름).backwards- 요소는 첫 번째 키프레임에 의해 설정된 스타일 값(애니메이션 방향에 따라 다름)을 가져오고 애니메이션 지연 기간 동안 이 값을 유지합니다.both- 애니메이션은 앞뒤 모두에 대한 규칙을 따르며 애니메이션 속성을 양방향으로 확장합니다.
다음 예제에서는 애니메이션이 끝날 때 <div> 요소가 마지막 키프레임의 스타일 값을 유지하도록 합니다.
예시
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
다음 예제에서는 애니메이션이 시작되기 전(애니메이션 지연 기간 동안) 첫 번째 키프레임에서 설정한 스타일 값을 <div> 요소에 가져올 수 있습니다.
예시
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
다음 예제에서는 <div> 요소가 애니메이션이 시작되기 전에 첫 번째 키프레임에 의해 설정된 스타일 값을 가져오고 애니메이션이 끝날 때 마지막 키프레임의 스타일 값을 유지하도록 합니다.
예시
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
애니메이션 속기 속성
아래 예제에서는 6가지 애니메이션 속성을 사용합니다.
예시
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
animationshorthand 속성 을 사용하여 위와 동일한 애니메이션 효과를 얻을 수 있습니다
.
예시
div
{
animation: example 5s linear 2s infinite alternate;
}
CSS 애니메이션 속성
다음 표에는 @keyframes 규칙과 모든 CSS 애니메이션 속성이 나열되어 있습니다.
| Property | Description |
|---|---|
| @keyframes | Specifies the animation code |
| animation | A shorthand property for setting all the animation properties |
| animation-delay | Specifies a delay for the start of an animation |
| animation-direction | Specifies whether an animation should be played forwards, backwards or in alternate cycles |
| animation-duration | Specifies how long time an animation should take to complete one cycle |
| animation-fill-mode | Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
| animation-iteration-count | Specifies the number of times an animation should be played |
| animation-name | Specifies the name of the @keyframes animation |
| animation-play-state | Specifies whether the animation is running or paused |
| animation-timing-function | Specifies the speed curve of the animation |