당신이 알아야 할 CSS3 애니메이션 기술 (3)

저자：Eve Cole 업데이트 시간：2009-12-31 15:36:22

이행

CSS 속성과 관련된 기본 전환은 요소를 정의하고 휴지 상태(예: 진한 파란색 배경)에서 마우스 오버 또는 활성 상태(예: 연한 파란색 배경)로 이동하는 것입니다.

변환은 변환(또한 :hover 또는 :focus와 같은 이벤트 발생)과 함께 사용하여 일부 애니메이션을 생성할 수 있습니다. CSS 전환을 통해 배경색을 흐리게 하고 요소를 슬라이드하고 개체를 회전할 수 있습니다.

인용된 내용은 다음과 같습니다.

#nav a{ 배경색:빨간색 }
#nav a:hover, #nav a:초점{
배경색:파란색;
/* 변환이 background-color 속성에 적용되도록 지시합니다(CSS 매개변수처럼 보이죠, 그렇죠? #foreshadowing)*/
-웹킷-전환-속성:배경색;
/* 2초 동안 지속되도록 놔두기*/
-웹킷-전환 기간:2초;
}

변환할 일부 매개변수

전환 속성

변환에 대한 CSS 속성 이름을 지정합니다. 예를 들어 위 예에서는 변환이 background-color 속성에 적용됩니다.

전환 기간

변환하는 데 걸리는 시간(이전 속성에서 새 속성으로 변경하는 데 걸리는 시간)을 정의합니다.

전환 타이밍 기능

과도한 효과로 이해될 수 있다. 변환 중 중간 값을 지정합니다. Cubic-Bezier로 지정할 수 있습니다. 물론 일반적으로 사용되는 몇 가지 기본 제공 값이 있습니다.

전환 지연

이것은 이해하기 더 쉽습니다. 변환 지연 시간입니다. 시간은 양의 정수, 음의 정수 또는 0이 될 수 있으며, 0이 아닌 경우 단위는 s(초) 또는 ms(밀리초)로 설정되어야 합니다. 해당 시점에서 이전 작업은 잘립니다.
참고: 매개변수 부분은 번역 중에 추가된 것으로 원문에는 없습니다.

브라우저 지원

변환 속성만큼 멋지지만 현재는 WebKit 브라우저에서만 지원됩니다. -moz-transition은 최근 Firefox 3.7의 nightly-build 버전에서 이미 사용 가능합니다. 향후 개선을 위해 CSS에 -moz-transition을 추가할 수도 있습니다. 만일을 대비해 개인 접두사 없이 속성을 추가할 수도 있습니다.

생기

애니메이션은 CSS 3가 가장 유용한 곳입니다. 위에서 논의한 모든 요소를 애니메이션 지속 시간, 애니메이션 이름 및 애니메이션 타이밍 기능과 같은 애니메이션 속성과 결합하여 순수 CSS인 Flash 애니메이션과 같은 효과를 만들 수 있습니다.

영상 주소: http://www.tudou.com/programs/view/YeTPctOy2mo

인용된 내용은 다음과 같습니다.

#회전 {
여백: 0 자동;
너비: 600px;
높이: 400px;
/* 우리가 3차원 공간에 있는지 확인하세요 */
-webkit-transform-style: 보존-3d;
/*행 전체가 x축 회전, 7초 애니메이션, 무한 재생, 선형성을 사용하도록 만듭니다*/
-webkit-animation-name: x-spin;
-웹킷 애니메이션 기간: 7초;
-webkit-animation-iteration-count: 무한;
-웹킷-애니메이션-타이밍-함수: 선형;
}
/* 호출할 애니메이션을 정의합니다*/
@-webkit-keyframes x-spin {
0% { -webkit-transform: 회전X(0deg) }
50% { -webkit-transform: 회전X(180deg) }
100% { -webkit-transform: 회전X(360deg) }
}

이 환상적인 CSS 애니메이션 코드와 온라인 데모는 웹킷 웹사이트에서 볼 수 있습니다. 데모는 모든 웹사이트에서 볼 수 있지만 애니메이션 효과는 Mac OS(Snow Leopard) 의 WebKit 야간 빌드 버전 에서만 볼 수 있습니다. 위 영상과 똑같고, Mac OS(Snow Leopard 버전)를 사용하신다면 웹킷을 설치해서 직접 그 효과를 확인해 보시는 것도 괜찮을 것 같습니다(정말 멋지네요). Windows 시스템 사용자는 일시적으로 이 효과를 감상할 수 없습니다.

애니메이션의 일부 매개변수

애니메이션의 매개변수는 번역의 매개변수와 다소 유사하므로 번역의 매개변수를 이해하면 여기에서도 이해하는 것은 어렵지 않습니다.

애니메이션 이름

애니메이션의 이름입니다.

애니메이션 기간

애니메이션이 한 번 재생되는 데 필요한 시간을 정의합니다. 기본값은 0입니다.

애니메이션 타이밍 기능

애니메이션이 재생되는 방식을 정의합니다. 매개변수 설정은 전환 타이밍 기능과 유사합니다.

애니메이션 지연

애니메이션이 시작되는 시점 정의

애니메이션 반복 횟수

루프 수를 정의합니다. 무한은 무제한을 의미합니다. 기본값은 1입니다.

-웹킷-애니메이션-방향

애니메이션 재생 방향은 두 가지 값이며 기본값은 일반입니다. 이때 애니메이션의 각 주기는 앞으로 재생됩니다. 다른 값은 대체이며, 짝수 번째 시간은 앞으로 재생되고 홀수 번째 시간은 역방향으로 재생됩니다.
브라우저 지원

불행하게도 현재 CSS 애니메이션을 지원하는 브라우저는 소수에 불과합니다. 2D CSS 애니메이션은 Safari 4(Leopard), Chrome 3, Safari Mobile, Shira 및 기타 Webkit 브라우저에서 작동합니다. Safari 4(Snow Leopard)는 3D 애니메이션을 지원합니다.