애니메이션

Internet Explorer 10 및 JavaScript로 작성한 Windows 스토어 앱은 CSS(Cascading Style Sheets) 애니메이션을 지원합니다. CSS 애니메이션을 사용하면 부드럽고 유연한 애니메이션 환경과 함께 시각적으로 사로잡는 풍부한 응용 프로그램을 만들 수 있습니다.

CSS 애니메이션은 W3C(World Wide Web 컨소시엄)의 CSS 애니메이션 사양에 정의되어 있습니다.

애니메이션은 위치, 크기, 색 및 불투명도를 변경하고 회전, 크기 조정, 변환 등을 진행하면서 요소에 애니메이션 효과를 준다는 점에서 전환과 유사합니다. 또한 전환에서와 마찬가지로 애니메이션의 진행 속도를 제어하기 위해 시간 함수를 지정할 수 있습니다.

그러나 CSS3(Cascading Style Sheets, Level 3) 애니메이션의 경우 애니메이션 중 여러 지점에서 애니메이션 속성의 값을 지정하는 키 프레임도 사용할 수 있습니다. 이렇게 하여 애니메이션의 동작을 시작과 끝은 물론 중간에서도 정의할 수 있습니다. 애니메이션에는 반복 및 역방향 접근 권한 값과 일시 중지 및 다시 시작 접근 권한 값도 사용할 수 있습니다.

예상할 수 있듯이 CSS3 애니메이션은 풍부하고 매력적인 경험을 만들 수 있는 무한한 가능성을 제공합니다. 이 항목에서는 Internet Explorer 10 및 JavaScript로 작성한 Windows 스토어 앱에서 CSS 애니메이션을 만드는 방법을 간단하게 설명하고 CSS3 애니메이션의 사용 예를 보여 줍니다.

이 항목에서 설명하는 속성(at-rule) 및 이벤트의 경우 전에는 Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱과 작동하려면 Microsoft 특정 공급업체 접두사인 "-ms-"가 필요했습니다. 이제 이 접두사는 필요하지 않지만 여전히 인식됩니다. 향후 호환성을 보장하려면 Microsoft 공급업체 접두사를 사용하는, 애니메이션 속성이 있는 응용 프로그램을 적절히 업데이트해야 합니다.

애니메이션 효과를 줄 수 있는 CSS 속성 목록은 애니메이션 및 전환 속성을 참조하세요.

애니메이션 만들기

다음 세 가지 기본 단계로 애니메이션을 만듭니다.

1. 애니메이션 속성 지정
2. 키 프레임 만들기
3. 하나 이상의 요소에 애니메이션 적용

애니메이션 속성 지정

먼저 선택기에서 애니메이션 효과를 주려는 요소에 적용되는 애니메이션 속성을 지정합니다. 이 섹션에서는 애니메이션 속성에 대해 설명합니다.

animation-name 속성

animation-name 속성은 애니메이션 식별자(실제로 특정 애니메이션에 지정한 "이름")를 지정합니다. 애니메이션 식별자는 CSS @keyframes at-rule을 선택합니다. 구문은 다음과 같습니다.

속성설명

animation-name

하나 이상의 애니메이션 식별자를 지정합니다. CSS @keyframes at-rule을 사용하여 애니메이션을 식별합니다.

 

animation-duration 속성

animation-duration 속성은 한 주기의 애니메이션을 완료하는 데 걸리는 시간을 지정합니다. 구문은 다음과 같습니다.

속성설명

animation-duration

하나 이상의 시간 값을 쉼표로 구분하여 표시합니다. 각 값은 전체 애니메이션 주기가 수행되는 시간을 나타냅니다. 각 값은 부동 소수점 숫자 형식을 사용하며 뒤에 시간 단위 지정자(ms 또는 s)가 추가됩니다. 이 속성은 음수 값을 허용합니다.

 

animation-timing-function 속성

animation-timing-function 속성은 단일 애니메이션 주기 중에 사용되는 중간 속성 값의 계산 방법을 설명하여 애니메이션 실행 시간 동안 애니메이션 속도를 변경할 수 있게 합니다. 이렇게 하려면 입방형 3차원 곡선을 기반으로 하며 4개의 매개 변수를 사용하는 애니메이션 시간 함수를 지정합니다. 전체 애니메이션이나 개별 키 프레임에 시간 함수를 지정할 수 있습니다.

cubic-bezier 함수를 사용하고 4개의 값을 수동으로 입력하여 명시적으로 곡선을 지정하거나, 각각 자주 사용하는 시간 함수에 해당하는 여러 함수 키워드 중에서 선택할 수 있습니다. 속성 구문은 다음과 같습니다.

속성설명

animation-timing-function

단일 애니메이션 주기 중에 사용되는 중간 속성 값을 정의하는 시간 함수를 쉼표로 구분하여 하나 이상 지정합니다. 애니메이션은 animation-name 속성이 지정하는 CSS @keyframes at-rule에 식별된 해당 개체 속성 집합에서 계산됩니다. 가능한 값은 다음 중 하나일 수 있습니다. 각 함수에 대한 설명은 animation-timing-function 참조 페이지를 참조하세요.

cubic-bezier(x1,y1,x2,y2)

이 함수의 4개 매개 변수는 0에서 1(포함) 사이의 부동 소수점 숫자여야 합니다. 값은 입방형 3차원 곡선 P1 및 P2 지점의 xy 좌표에 해당합니다. opacitycolor 이외의 속성에서 cubic-bezier 곡선 함수는 0에서 1 사이의 표준 범위를 벗어난 y 좌표를 허용합니다. 따라서 "탄력적" 또는 "바운스" 전환 효과를 만들 수 있습니다.

ease

초기값입니다. 이 시간 함수는 시작 부분에서 속도를 점점 늘리고, 전체 속도로 애니메이션 효과를 준 다음 끝 부분에서 속도를 점점 줄입니다.

linear

이 시간 함수는 시작부터 끝까지 일정한 속도를 유지합니다.

ease-in

이 시간 함수는 시작 부분에서 속도를 점점 늘립니다.

ease-out

이 시간 함수는 끝 부분에서 속도를 점점 줄입니다.

ease-in-out

이 시간 함수는 시작 부분에서 속도를 점점 늘리고 끝 부분에서 속도를 점점 줄입니다.

steps

이 시간 함수는 단계별 시간 함수를 정의하고 두 개의 매개 변수를 사용합니다. 첫 번째 매개 변수는 간격 수를 지정합니다. 두 번째 선택적 매개 변수는 속성 값이 변경되는 간격 내 지점을 지정합니다. 두 번째 매개 변수는 기본값인 start 또는 end 값으로 제한됩니다.

 

animation-iteration-count 속성

animation-iteration-count 속성은 애니메이션 주기의 재생 횟수를 정의합니다. 속성 구문은 다음과 같습니다.

속성설명

animation-iteration-count

애니메이션 주기의 재생 횟수를 지정합니다. 여러 값이 쉼표로 구분됩니다.

<number>

애니메이션 주기의 재생 횟수입니다. 정수가 아닌 숫자를 지정할 수 있으며, 주기 중 한 지점에서 애니메이션이 끝납니다. 초기값은 "1"입니다.

infinite

애니메이션이 계속 반복됩니다.

음수 값이나 값 "0"을 지정하면 애니메이션이 적용되지 않습니다.

alternate로 설정된 animation-direction 속성과 함께 animation-iteration-count 속성을 사용할 수 있으며, 이 경우 애니메이션이 대체 주기에서 역방향으로 재생됩니다.

 

animation-direction 속성

animation-direction 속성은 애니메이션 주기의 재생 방향을 지정합니다. 속성 구문은 다음과 같습니다.

속성설명

animation-direction

대체 주기에서 애니메이션을 역방향으로 재생할지 여부를 정의합니다. 이 속성은 쉼표로 구분된 다음 값 중 하나 이상으로 설정할 수 있습니다.

normal

초기값입니다. 대체 주기에서 애니메이션이 역방향으로 재생되지 않음을 나타냅니다.

reverse

이 값은 애니메이션 주기가 지정된 방향의 반대 방향으로 재생됨을 나타냅니다.

alternate

이 값은 애니메이션 주기가 정방향(홀수 반복) 및 역방향(짝수 반복) 재생을 교대로 전환함으로 나타냅니다.

alternate-reverse

이 값은 애니메이션 주기가 역방향(홀수 반복) 및 정방향(짝수 반복) 재생을 교대로 전환함으로 나타냅니다.

 

animation-play-state 속성

animation-play-state 속성은 애니메이션이 계속 실행되는지, 아니면 일시 중지되는지를 지정합니다. 이 속성은 사용자가 애니메이션을 일시 중지할 수 있는 메커니즘을 만들 때 유용합니다. 속성 구문은 다음과 같습니다.

속성설명

animation-play-state

애니메이션이 계속 실행되는지, 아니면 일시 중지되는지를 정의합니다. 이 속성은 쉼표로 구분된 다음 값 중 하나 이상으로 설정할 수 있습니다.

paused

실행 중인 애니메이션을 일시 중지합니다. 마치 애니메이션 시간이 일정한 것처럼 정적 상태에서 애니메이션의 현재 값이 계속 표시됩니다.

running

일시 중지된 애니메이션을 계속 실행합니다. 애니메이션이 현재 값에서 다시 시작됩니다.

 

animation-delay 속성

animation-delay 속성은 애니메이션이 시작되는 시간을 정의하며 적용된 시간부터 일정 시간 후에 애니메이션을 시작할 수 있게 합니다. 구문은 다음과 같습니다.

속성설명

animation-delay

해당 개체 속성 집합에 대해 애니메이션이 표시되기 전의 애니메이션 내 오프셋 값(애니메이션 시작 이후의 시간)을 쉼표로 구분하여 하나 이상 지정합니다. 각 값은 부동 소수점 숫자 형식을 사용하며 뒤에 시간 단위 지정자(ms 또는 s)가 추가됩니다.

  • "0" 값이 초기값이며, 이 경우 애니메이션이 적용되는 즉시 실행됩니다.
  • 음수 값을 지정하면 애니메이션이 적용되는 즉시 실행되지만 지정한 오프셋이나 재생 주기 중에 실행을 시작하는 것처럼 표시됩니다.

 

animation-fill-mode 속성

animation-fill-mode 속성은 재생 이전이나 이후에 애니메이션 효과를 표시할지 여부를 정의합니다. 기본적으로 애니메이션은 적용 및 실행 사이의 시간에(animation-delay 속성에 정의된 지연 동안) 속성 값에 영향을 주지 않습니다. 또한 애니메이션이 종료된 후(animation-duration 속성에 정의된 시간이 경과한 후)에는 기본적으로 애니메이션이 속성 값에 영향을 주지 않습니다. animation-fill-mode 속성은 이러한 기본 동작을 재정의하는 데 사용됩니다. 구문은 다음과 같습니다.

속성설명

animation-fill-mode

실행 시간 이외의 애니메이션 동작을 정의하는 값을 쉼표로 구분하여 하나 이상 지정합니다. 다음 값 중 하나로 설정할 수 있습니다.

none

기본 동작이 변경되지 않습니다.

forwards

애니메이션이 완료된 후에도 마지막 키 프레임에 정의된 최종 속성 값이 유지됩니다.

backwards

animation-delay에 정의된 기간 중 애니메이션을 표시하기 전에 첫 번째 키 프레임에 정의된 시작 속성 값이 적용됩니다.

both

앞으로 및 뒤로 채우기 모드가 모두 적용됩니다.

 

animation 속성

animation 단축형 속성은 6개 애니메이션 속성을 하나의 속성으로 결합합니다. 구문은 다음과 같습니다.

Property설명

animation

해당 개체 속성 집합에 대해 공백으로 구분된 애니메이션 속성 집합을 하나 이상 지정합니다. 애니메이션 속성 값은 다음 순서로 설정해야 합니다.

6개 애니메이션 속성 값 집합이 여러 개 있는 경우 각 집합을 쉼표로 구분해야 합니다.

 

div 요소의 여러 애니메이션 속성을 정의하는 다음 코드 예제를 고려해 보세요.


div {
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-delay: -1s;
  animation-iteration-count: 2;
  animation-direction: normal;
}


animation 단축형 속성을 사용할 경우 다음과 같이 6개 속성을 모두 한 줄로 지정할 수 있습니다.


div {
  animation: myAnimation 3s ease-out -1s 2 normal;
}


키 프레임 만들기

다음에는 애니메이션의 키 프레임을 지정합니다. 키 프레임을 사용하면 애니메이션의 중간 값을 세부적으로 제어할 수 있습니다. @keyframes 규칙은 개체에 대한 속성 애니메이션 키 프레임 목록을 지정하고 애니메이션의 식별자를 지정합니다. 구문은 다음과 같습니다.

규칙설명

@keyframes

HTML 문서의 개체에 대한 속성 애니메이션 키 프레임 목록입니다. 이 규칙은 애니메이션 중 여러 지점의 속성 값과 애니메이션의 식별자를 지정하는 데 사용됩니다. 단일 애니메이션 주기 중의 속성 값을 지정합니다. 애니메이션은 한 번 이상 반복될 수 있습니다.

이 규칙은 키 프레임 선택기를 사용하여 여러 애니메이션 단계에서 속성 값을 지정합니다. 키 프레임 선택기는 from(0%), to(100%) 및 하나 이상의 비율로 선언할 수 있습니다.

 

다음 예제는 각각 두 개의 키 프레임 설명자가 있는 키 프레임 선택기 3개를 보여 줍니다.


@keyframes myAnimation {
  from {     
    left: 100px;
    right: 50px;  
  } 
  40% {      
    left: 50px;
    right: 10px; 
  }
  to {         
    left: 10px;
    right: 10px;
  }
}

이 예제에서는 애니메이션 중 세 개의 지점에 키 프레임을 지정합니다. 해당 지점은 시작(from 값 또는 0%), 40%, 끝(to 값 또는 100%)입니다.

애니메이션이 다른 키 프레임으로 이동할 때 사용할 시간 함수를 지정할 수도 있습니다. animation-timing-function 속성을 적절한 키 프레임 선택기에 포함하면 됩니다.

애니메이션 적용

마지막으로, 요소에 애니메이션 스타일을 적용합니다. 일반적으로 이 작업은 단추 클릭(또는 탭) 등의 이벤트에 의해 트리거됩니다. 전환과 달리, CSS 애니메이션은 애니메이션 효과를 주는 속성 값을 변경하여 중단할 수 없습니다. CSS 애니메이션을 중단하려면 animation-play-state 속성을 사용하거나 애니메이션 이름을 추가 또는 제거해야 합니다.

애니메이션이 완료되면 애니메이션 효과를 준 속성이 원래 값으로 돌아갑니다.

예제

다음 예제는 CSS 애니메이션을 보여 줍니다. 이 애니메이션은 IE 테스트 드라이브실습: 애니메이션(영문)을 사용하여 만들었습니다.

먼저 약간의 텍스트를 사용하여 div 요소를 만들고 일부 스타일을 적용합니다.


<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<style type="text/css">
body {
  padding:10px;
  font:bold 20pt "Segoe UI";
}
div {
  width:250px; 
  background-color:lime;
  padding:10px;
}
</style>
</head>
<body>
<div>
Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim,
vitae euismod odio. Suspendisse eu.
</div>
</body>
</html>


이 코드가 어떻게 표시되는지 확인하려면 이 페이지를 보세요.

이제 애니메이션의 매개 변수를 몇 개 정의하겠습니다. :active 의사 클래스를 사용하는 style 섹션에 선택기를 추가합니다. 그러면 사용자가 텍스트 블록을 클릭하고 누르거나 길게 누르는 동안만 애니메이션이 발생합니다. 완료될 때까지 애니메이션이 계속됩니다.

애니메이션이 즉시 시작되고 5초 동안 지속된 다음 한 번 반복되고(총 반복 횟수 2회) "demo"라는 이름으로 식별되도록 다음 선택기를 추가합니다.


...
div:active {
  animation-delay: 0s;
  animation-duration: 5s;
  animation-iteration-count: 2;
  animation-name: demo;
}
...

이제 애니메이션 시작, 중간 및 끝 부분에 대해 각각 하나씩, 세 개의 키 프레임을 만들겠습니다. 각 키 프레임 내에 변경되는 속성과 시간 함수를 모두 정의하여 변화율을 정의합니다.


@keyframes demo {
  from {
    animation-timing-function: ease;
  }
  50% {
    background-color: purple;
    animation-timing-function: ease-in;
    transform: translate(20px,30px);
  }
  to {
    background-color: blue;
  }
}

애니메이션 효과를 줄 두 가지 속성인 background-colortransform을 정의했습니다. 단일 애니메이션 주기 중에 div 요소의 배경색이 라임(원래 색)에서 자주색, 파란색 순으로 바뀝니다. 또한 div 요소가 오른쪽과 아래로 각각 20픽셀과 30픽셀만큼 이동한 후 다시 돌아옵니다. 처음부터 중간 지점(50%의 키 프레임)까지의 애니메이션에는 ease 시간 함수가 사용되고, 중간 지점부터 끝까지의 애니메이션에는 ease-in 시간 함수가 사용됩니다. 애니메이션은 한 번 반복됩니다.

이 애니메이션을 봅니다. Internet Explorer 10이 필요합니다.

애니메이션 DOM 이벤트

Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱은 다음 세 가지 애니메이션 DOM(문서 개체 모델) 이벤트를 정의합니다.

animationstart

animationstart 이벤트는 필요한 경우 animation-delay 속성에 지정된 애니메이션 지연을 고려하여 애니메이션 시작 부분에서 발생합니다. 음수 지연을 지정하면 경과 시간이 지연의 절대값과 같도록 이벤트가 발생합니다.

animationend

animationend 이벤트는 애니메이션이 완료될 때 발생합니다.

animationiteration

animationiteration 이벤트는 각 애니메이션 반복이 끝날 때 발생합니다. 이 이벤트는 animation-iteration-count 속성이 1보다 큰 경우에만 발생합니다.

  • 거품형: 예
  • 취소 가능: 예

이 예제는 <div> 요소에 애니메이션 효과를 주고 animationend, animationendanimationiteration 이벤트를 발생시켜 상자의 텍스트를 변경합니다. 온라인에서 예제를 체험해 보세요.


<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>CSS Animation Events Example</title>
<style>
  body {
    padding:10px;
    font-family:"Segoe UI";
  }
  div {
    width:250px; 
    background-color:lime;
    padding:10px;
    font-weight:bold;
    font-size:20pt;
  }
  div:active {
    animation-delay: 0s;
    animation-duration: 3s;
    animation-iteration-count: 2;
    animation-name: demo;
  }
  @keyframes demo {
    from {
    animation-timing-function: ease;
    }
    50% {
      background-color: purple;
      animation-timing-function: ease-in;
      transform: translate(20px,30px);
    }
    to {
      background-color: blue;
    }
  }
</style>
</head>
<body>
  <h1>CSS Animation Events Example</h1>
    <p>Click and hold to start the animation. Internet Explorer 10 or later required.</p>
    <div id="mydiv">
      Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.
    </div>

    <script>
      var divObj = document.getElementById("mydiv");
      divObj.addEventListener("animationstart", function (
      ) {
       this.innerHTML = "This is the animation start event";
      }, false);

      divObj.addEventListener("animationend", function () {
        this.innerHTML = "This is the animation end event";
      }, false);

      divObj.addEventListener("animationiteration", function () {
        this.innerHTML = "This is the animation iteration event";
      }, false);

    </script>


</body>
</html>


API 참조

Animations

샘플 및 자습서

CSS 변형, 전환 및 애니메이션을 사용하여 웹 페이지에 생기를 불어넣는 방법

Internet Explorer 테스트 드라이브 데모

실습: 애니메이션
CSS 변형 및 애니메이션을 사용하여 독창적인 페이지 작성
Beta Fish IE

IEBlog 게시물

CSS3 전환 및 애니메이션을 사용하여 개성 살리기
CSS를 사용한 전체 페이지 애니메이션
IE10의 CSS3 3D 변형

사양

CSS 애니메이션

관련 항목

CSS3 애니메이션을 사용하여 멋진 앱 빌드
jQuery 대체를 사용한 CSS3 애니메이션

 

 

표시:
© 2014 Microsoft