정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

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

Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱은 CSS 3D 변형, CSS 전환 및 CSS 애니메이션을 지원하여 Internet Explorer 9에서 소개된 CSS(CSS 스타일시트) 2D 변형에 대한 지원을 확장했습니다.

소개

CSS 2D 및 3D 변형을 사용하면 이전에 CSS 태그를 사용하여 가능했던 것보다 훨씬 더 흥미롭고 유연한 방법으로 웹 사이트의 요소를 조작할 수 있습니다. 이 사양은 회전, 이동, 배율 조정 및 기울이기뿐 아니라 임의의 변형 및 여러 변형의 구성에 대한 지원도 제공합니다. CSS 변형은 특별한 경험이 없는 사용자에게는 처음에 다소 어려워 보일 수 있지만 3D 공간에서 요소를 조작하고, 투영의 중심을 변경하고, 변형의 원점에 영향을 주는 기능과 함께 사용하면 매우 강력한 기능이 될 수 있습니다.

CSS 전환 및 애니메이션을 CSS 변형과 함께 사용하여 웹 콘텐츠에 생기를 불어넣을 수 있습니다. 또한 CSS 변형은 Internet Explorer 10에서 스크립팅과 비동기적으로 실행되므로 JavaScript를 사용한 애니메이션의 훨씬 더 빠른 대안을 제공합니다. CSS 전환은 요소를 한 상태에서 다른 상태로 전환하는 애니메이션 효과를 주는, 상대적으로 간단한 방법입니다. CSS 애니메이션은 CSS 전환보다 더 유연한 방법으로, 시간이 지남에 따라 요소가 변화하는 방식을 더 매끄럽게 제어하고 중간 상태를 정의할 수 있습니다.

이러한 기능은 여러 가지 새로운 CSS 속성과 JavaScript 이벤트를 통해 노출되며, 이 속성과 이벤트는 모두 해당하는 W3C(World Wide Web 컨소시엄) 사양에 정의되어 있습니다. 여기에 제공된 정보는 이러한 새로운 개념을 소개하여 이 개념을 웹 사이트에 원활하게 통합할 수 있도록 도와줍니다. CSS 변형(2D와 3D 모두), CSS 전환 및 CSS 애니메이션과 해당하는 주요 구성 요소를 간단히 살펴봅니다. 이러한 기술이 사용되는 여러 예제도 함께 살펴볼 것입니다.

참고  이 섹션에는 정지 상태의 그림과 기술이 작동하는 예제에 대한 링크가 모두 포함되어 있습니다. 최상의 결과를 얻으려면 CSS 변형, 전환 및 애니메이션을 지원하는 브라우저(예: Internet Explorer 10)를 사용하여 이러한 예제를 보는 것이 좋습니다. 또한 이러한 기능은 Internet Explorer 10에서 하드웨어 가속 기능이므로 효과를 매끄럽고 빠르게 표시하기 위해 컴퓨터의 그래픽 하드웨어를 사용합니다.

이 조항의 내용

항목설명

2D 및 3D의 CSS 변형

CSS 변형을 사용하면 2차원 및 3차원 공간에서 요소를 변환할 수 있습니다.

CSS 전환

CSS 전환을 사용하면 지정된 시간 동안 CSS 속성 값을 매끄럽게 변경하여 간단한 애니메이션을 만들 수 있습니다.

CSS 애니메이션

CSS 애니메이션을 사용하면 시간이 지남에 따라 단순히 CSS 속성을 매끄럽게 변경(CSS 전환으로 이미 가능)하는 것 이상을 수행할 수 있습니다. CSS 애니메이션은 또한 키 프레임을 사용하여 복잡한 애니메이션을 디자인하는 것은 물론 스크립팅을 통해 더 매끄럽게 제어할 수 있는 기능을 제공합니다.

 

 

 

표시:
© 2014 Microsoft