CSS 애니메이션

CSS 애니메이션

CSS는 JavaScript나 Flash 없이도 HTML 요소의 애니메이션 효과를 구현할 수 있습니다！

CSS

이 장에서는 다음과 같은 속성을 배울 것입니다：

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

애니메이션의 브라우저 지원

표에서 수치는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

속성 크롬 IE 파이어폭스 사파리 오페라
@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 규칙

당신이 @keyframes 규칙에서 CSS 스타일을 지정하면, 애니메이션은 특정 시간 동안 현재 스타일에서 새 스타일로 점진적으로 변경됩니다.

애니메이션을 활성화하려면, 애니메이션을 어떤 요소에 연결해야 합니다.

아래의 예제는 "example" 애니메이션을 <div> 요소에 연결합니다. 애니메이션은 4초 동안 진행되며, 동시에 <div> 요소의 배경색이 "red"에서 "yellow"으로 점진적으로 변경됩니다：

예제

/* 애니메이션 코드 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* 이 요소에 애니메이션 효과 적용 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

직접 테스트해 보세요

주의:animation-duration 속성이 필요합니다. 만약 지정하지 않으면, animation-duration 속성이 있으면 애니메이션이 발생하지 않습니다. 기본 값은 0s(0초)입니다.

위의 예제에서, "from"과 "to" 키워드(0%(시작)과 100%(완료)를 대표)를 사용하여 스타일이 언제 변경되는지 설정했습니다。

또한, 백분율 값을 사용할 수 있습니다. 백분율을 사용하여 필요에 따라 무제한으로 스타일 변경을 추가할 수 있습니다。

아래의 예제는 애니메이션이 25%，50% 완료되고 애니메이션이 100% 완료될 때 <div> 요소의 배경색을 변경합니다：

예제

/* 애니메이션 코드 */
@keyframes example {
  0%   {background-color: red;}
  25% {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* 애니메이션을 적용할 요소 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

직접 테스트해 보세요

아래의 예제에서, 애니메이션이 25%，50%，100%가 완료될 때 배경색과 <div> 요소의 위치가 변경됩니다:

예제

/* 애니메이션 코드 */
@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;}
}
/* 애니메이션을 적용할 요소 */
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) - 运行您在三次贝塞尔函数中定义自己的值

下面这些例子展示了可以使用的一些不同速度曲线：

예제

#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 - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
  • 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;
}

직접 테스트해 보세요

애니메이션 단축 속성

아래 예제는 여섯 가지 애니메이션 속성을 사용합니다:

예제

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

직접 테스트해 보세요

단축 사용 animation 속성도 위 예제와 같은 애니메이션 효과를 구현할 수 있습니다:

예제

div {
  animation: example 5s linear 2s infinite alternate;
}

직접 테스트해 보세요

CSS 애니메이션 속성

아래 표는 @keyframes 규칙과 모든 CSS 애니메이션 속성을 나열합니다:

속성 설명
@keyframes 애니메이션 모드를 정의.
animation 모든 애니메이션 속성의 줄임말 속성을 설정.
animation-delay 애니메이션 시작에 대한 지연을 정의.
animation-direction 애니메이션은 앞으로 재생되는지, 뒤로 재생되는지, 대체로 재생되는지 정의.
animation-duration 애니메이션이 한 주기를 완료하는 데 걸리는 시간을 정의.
animation-fill-mode 요소가 애니메이션을 재생하지 않을 때의 스타일을 정의합니다. (시작 전, 끝나거나, 둘 다).
animation-iteration-count 애니메이션을 재생해야 할 횟수를 정의.
animation-name 정의 @keyframes 애니메이션의 이름.
animation-play-state 애니메이션이 실행되는지 중지되는지 정의합니다.
animation-timing-function 애니메이션의 속도 곡선을 정의합니다.