전환

Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱은 CSS3(Cascading Style Sheets, Level 3) 변환을 지원합니다. 전환을 사용하면 지정된 시간 동안 CSS 스타일시트 속성 값을 매끄럽게 변경하여 간단한 애니메이션을 만들 수 있습니다. 예를 들어 10초 동안 개체의 크기와 색에 변화를 줄 수 있습니다. 이전에는 CSS 및 JavaScript의 복잡한 조합을 사용해야 했던 작업을 이제 CSS만 사용해서 수행할 수 있습니다. CSS3 전환은 W3C(World Wide Web 컨소시엄)의 CSS 전환 모듈 수준 3 사양에 정의되어 있으며, 현재 작업 초안 단계입니다.

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

이 항목에서는 CSS3 전환을 구성하는 속성을 간단하게 설명하고 간단한 전환 사용 예제를 보여 줍니다.

전환을 적용할 수 있는 CSS 속성 목록은 애니메이션 및 전환 속성을 참조하세요.

transition-property 속성

transition-property 속성을 사용하여 새 속성 값을 지정할 때 전환 효과를 적용할 CSS 속성을 하나 이상 식별합니다.

속성설명

transition-property

새 속성 값을 지정할 때 전환 효과를 적용할 CSS 속성 이름을 나타냅니다. transition-property 속성은 쉼표로 구분된 CSS 속성 목록이나 다음 값 중 하나로 설정할 수 있습니다.

  • none  새 속성 값을 지정할 때 전환 효과를 적용하지 않습니다. 모든 전환 속성이 무시됩니다.
  • all  기본값입니다. 새 속성 값을 지정할 때 전환을 지원하는 모든 속성에 전환 효과가 적용됩니다.

 

위치 지정, 색, 글꼴 등의 추가 기본 CSS 속성에 전환을 적용하는 것은 물론 opacity, border-radius 등의 새로 지원되는 CSS 속성과 2D 및 3D 변형에 전환을 적용할 수도 있습니다.

전환을 중단하면 자동으로 취소됩니다.

transition-duration 속성

transition-duration 속성은 전환이 수행되는 시간을 정의합니다.

속성설명

transition-duration

각각 이전 값에서 새 값으로의 전환이 수행되는 시간을 나타내는 시간 값을 쉼표로 구분하여 하나 이상 지정합니다. 각 값은 부동 소수점 숫자 형식을 사용하며 뒤에 시간 단위 지정자(ms 또는 s)가 추가됩니다.

 

transition-timing-function 속성

transition-timing-function 속성은 전환 중에 사용되는 중간 값의 계산 방법을 설명하여 기간 동안 전환 속도가 변경될 수 있도록 합니다. 이렇게 하려면 입방형 3차원 곡선을 기반으로 하며 4개의 매개 변수를 사용하는 애니메이션 시간 함수를 지정합니다.

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

속성설명

transition-timing-function

해당 개체 속성 집합의 전환 중에 사용되는 중간 속성 값을 정의하는 시간 함수를 쉼표로 구분하여 하나 이상 지정합니다. 가능한 값은 다음 중 하나일 수 있습니다. 각 함수에 대한 설명은 transition-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  이 시간 함수는 단계별 시간 함수를 정의하고 두 개의 매개 변수를 사용합니다. 첫 번째 매개 변수는 간격 수를 지정합니다. 두 번째 선택적 매개 변수는 속성 값이 변경되는 간격 내 지점을 지정합니다. 두 번째 매개 변수는 기본값인 시작 또는 끝 값으로 제한됩니다.

 

transition-delay 속성

transition-delay 속성을 사용하면 전환 시작을 지연하거나 전환이 이미 진행 중인 것처럼 표시되게 할 수 있습니다. transition-delay 속성 값이 음수 값이면 전환이 적용되는 즉시 실행되지만 지정한 오프셋이나 재생 주기 중에 실행을 시작하는 것처럼 표시됩니다.

속성설명

transition-delay

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

 

transition 속성

transition 단축형 속성은 앞에서 설명한 네 가지 전환 속성을 하나의 속성으로 결합합니다.

속성설명

transition

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

네 가지 전환 속성 값 집합이 여러 개 있는 경우 각 집합을 쉼표로 구분해야 합니다.

 

예제

CSS3 전환의 실습 데모를 보려면 IE 테스트 드라이브실습: 전환(영문)을 참조하세요.

다음 간단한 예제에서는 CSS3 전환을 사용하여 div 요소에 적용된 하나의 CSS3 속성을 시간에 따라 변화시키는 방법을 보여 줍니다.

먼저 약간의 텍스트가 포함된 div 요소를 만들고 일부 스타일을 적용합니다.


<!DOCTYPE html>
<html lang="en-us">

<head>
<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>


이 페이지를 보세요.

사용자가 div를 클릭하고 누르거나 길게 누르면 opacity 속성을 변화시켜 div가 시간에 따라 천천히 사라지도록 하겠습니다. 먼저 opacity 속성의 "before" 및 "after" 값을 설정합니다. 처음에는 div의 불투명도를 "1"로 지정하고 div가 "활성" 상태이면 "0"으로 지정합니다. 이 작업을 위해 스타일 섹션이 다음과 같이 표시되도록 불투명도 속성을 추가합니다.


...
<style type="text/css">
body {
  padding:10px;
  font:bold 20pt "Segoe UI"; 
}
div {
  width:250px; 
  background-color:lime;
  padding:10px;
  opacity:1;
}
div:active {
  opacity:0;
}
</style>
...


이제 녹색 div를 클릭하고 누르거나 길게 누르면 마우스를 클릭한 동안(또는 손가락을 누르는 동안) 즉시 사라집니다. 이 페이지를 보세요.

이제 CSS 전환 속성을 추가하여 불투명도가 점점 사라지게 만들 수 있습니다. 먼저 transition-property 속성을 사용하여 전환할 속성을 식별합니다.


transition-property: opacity;

그런 다음 transition-duration 속성을 사용하여 전환 기간을 추가합니다.


transition-duration: 5s;

이제 transition-timing-function 속성과 함께 사용할 시간 함수를 정의하겠습니다. div가 일정하게 전환되도록 선형 시간 함수를 사용합니다.


transition-timing-function: linear;

transition-delay 속성을 사용하여 전환을 1초 동안 지연시킬 수도 있습니다.


transition-delay: 1s;

이 네 가지 속성을 적용하면 opacity 속성이 1초 후에 5초 동안 일정하게 전환됩니다. 전환 단축형 속성을 사용하여 네 가지 속성을 결합할 수도 있습니다.


transition: opacity 5s linear 1s;

이 페이지를 보세요.

한 요소의 여러 속성을 전환하려면 전환 속성을 여러 값으로 설정하고 각 값을 쉼표로 구분합니다. 예를 들어 이전 예제에 색 변경을 추가할 수 있습니다. 먼저 div :active 선택기에 background-color 속성을 추가합니다. 다음과 같이 transition 속성을 변경합니다.


transition: opacity 5s linear 1s, background-color 2s ease;

이 속성은 감속/가속 시간 함수를 사용하여 2초 동안 자주색으로의 색 전환을 추가합니다. 지연 값이 없으므로 즉시 전환이 시작됩니다. 이 페이지를 보세요.

전환 DOM 이벤트

Internet Explorer 10 및 JavaScript로 작성한 Windows 스토어 앱은 다음 두 개의 전환 이벤트를 정의합니다.

transitionstart

transitionstart 이벤트는 전환이 시작될 때 발생합니다.

전환됨

transitionend 이벤트는 전환이 완료될 때 발생합니다. 완료되기 전에 전환을 제거하면 이벤트가 발생하지 않습니다.

이 예제는 <div> 요소에 전환을 적용하고 transitionstarttransitionend 이벤트를 발생시켜 상자의 텍스트를 변경합니다. 온라인에서 예제를 체험해 보세요.


<!DOCTYPE html>
<html>

<head>
<title>CSS Transitions Event Example</title>
<style media="screen" type="text/css">
#animatedDiv {
    opacity: 0.5;
    background-color: #D2D2D2;
    color: black;
  width:100px;
  height:100px;
}
#animatedDiv:hover {
    opacity: 1;
    background-color: #F472D0;
    transform: rotate(45deg) translateX(200px);
    transition: all 5s linear 1s;
}
  #Figure {
  border: solid 1px black;
  }
</style>
</head>

<body>

<h1 id="DemoTitle">CSS transition events example</h1>
  <p>Hover your mouse over the inner box</p>
<div class="FigureContainer Bordered">
    <div id="Figure" style="width: 330px; height: 300px;">
        <div id="animatedDiv" aria-haspopup="true">
            Transitioned Element</div>
    </div>
</div>

    <script>
      var divObj = document.getElementById("animatedDiv");
      divObj.addEventListener("transitionstart", function () {
        this.innerHTML = "This is a transition start event";
      }, false);
      divObj.addEventListener("transitionend", function () {
        this.innerHTML = "This is a transition end event";
      }, false);

    </script>

</body>

</html>


API 참조

Transitions

샘플 및 자습서

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

Internet Explorer 테스트 드라이브 데모

실습: 전환
IE10의 CSS3 3D 변형
CSS 변형 및 애니메이션을 사용하여 독창적인 페이지 작성

IEBlog 게시물

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

사양

CSS 전환

관련 항목

CSS 전환을 사용한 멋진 앱

 

 

표시:
© 2014 Microsoft