CSS3 애니메이션 사용 방법 - 변형

의 개념을 기반으로합니다. 변형 동작은 매우 멋지지만 CSS3은 (기다리기) 애니메이션 메커니즘이라는 더욱 흥미 진진한 형태의 애니메이션을 약속합니다. 다음은 화면 주위를 움직이는 상자의 애니메이션입니다.

CSS 애니메이션을 제작하기위한 기본 전략은 다음과 같습니다.

1. 키 프레임 세트 생성.

   애니메이션은 키 프레임의 개념을 기반으로합니다. 각 키 프레임은 객체의 상태를 지정하고 브라우저는 키 프레임간에 부드럽게 전환하려고 시도합니다.

2. 각 키 프레임마다 백분율을 지정하십시오.

   키 프레임은 애니메이션에서 키 프레임이 어디에서 발생 하는지를 나타내는 백분율로 시작합니다. 첫 번째 키 프레임은 0 % (애니메이션의 시작 부분)이고 마지막 부분은 100 % (애니메이션의 끝 부분) 여야합니다. 원하는만큼 중간 키 프레임을 지정할 수 있습니다.

3. 각 키 프레임에 미니 스타일 시트를 추가합니다.

   수정하려는 스타일을 작은 스타일 시트에 배치하십시오. 타임 라인의 지정된 위치에서이 애니메이션 다음의 요소는 지정된 스타일 동작을 표시합니다. 원하는 스타일 정보를 여기에 배치 할 수 있습니다.

4. 요소에 애니메이션을 적용합니다.

   애니메이션 규칙을 사용하면 요소에 키 프레임을 적용 할 수 있습니다. 원하는 경우 여러 요소간에 동일한 키 프레임을 재사용 할 수 있습니다.

5. 애니메이션을 수정하십시오.

   전환 할 때와 동일한 특성을 애니메이션에 여러 개 적용 할 수 있습니다. 여러 가지 매개 변수가 있지만 가장 일반적으로 사용되는 요소는 키 프레임, 시간 및 반복입니다.

애니메이션 코드를 살펴보십시오. html로 모든 것을 볼 수 있습니다:

animation. html @keyframes anim {0 % {왼쪽: 0px; 상단: 0 픽셀;} 25 % {왼쪽: 100 픽셀; 상단: 0 픽셀;} 50 % {왼쪽: 100 픽셀; 상단: 100 픽셀;} 75 % {왼쪽: 0 픽셀; 상단: 100 픽셀;} 100 % {왼쪽: 0 픽셀; top: 0px;}} @ -webkit-keyframes anim {0 % {왼쪽: 0px; 상단: 0 픽셀;} 25 % {왼쪽: 100 픽셀; 상단: 0 픽셀;} 50 % {왼쪽: 100 픽셀; 상단: 100 픽셀;} 75 % {왼쪽: 0 픽셀; 상단: 100 픽셀;} 100 % {왼쪽: 0 픽셀; top: 0px;}} @ -moz-keyframes anim {0 % {왼쪽: 0px; 상단: 0 픽셀;} 25 % {왼쪽: 100 픽셀; 상단: 0 픽셀;} 50 % {왼쪽: 100 픽셀; 상단: 100 픽셀;} 75 % {왼쪽: 0 픽셀; 상단: 100 픽셀;} 100 % {왼쪽: 0 픽셀; top: 0px;}} @ -o-keyframes anim {0 % {왼쪽: 0px; 상단: 0 픽셀;} 25 % {왼쪽: 100 픽셀; 상단: 0 픽셀;} 50 % {왼쪽: 100 픽셀; 상단: 100 픽셀;} 75 % {왼쪽: 0 픽셀; 상단: 100 픽셀;} 100 % {왼쪽: 0 픽셀; 상단: 0 픽셀;}} #box {위치: 절대; 테두리: 1 픽셀 단색 검정; -webkit-animation: anim 5s linear 무한; -moz-animation: anim 5s linear 무한; -o-animation: anim 5s linear 무한; 이동 상자

이 예제에 대해 유의할 점이 많습니다.

• 라는 키 프레임 세트 만들기 @keyframes 규칙은 페이지 기반 애니메이션을 만드는 데 사용됩니다. CSS의 나머지 부분에서 사용할 수있는 고급 리소스입니다.이 경우 키 프레임 세트를 생성하는 데 사용됩니다.

• 브라우저 전용 버전 빌드: 불행히도 애니메이션 메커니즘에는 여전히 브라우저 별 프리픽스가 필요합니다. 보통 기본 동작이 작동 할 때 하나의 브라우저를 대상으로 지정하고 다른 브라우저에서 복사하는 것이 가장 쉽습니다.

• 이 예제에서는 사각형 패턴으로 요소를 이동합니다. 이 특정 예에서는 div가 정사각형 모션으로 이동합니다. 키 프레임을 살펴보면 div의 왼쪽 위 및 위쪽 위치로의 간단한 변경이 시간이 지남에 따라 이루어 졌음을 알 수 있습니다.

• 시작과 끝내기: 이 애니메이션을 계속 실행하려면 시작과 끝 장소를 동일하게 지정해야합니다.

• anim 키 프레임 세트를 요소에 적용합니다. 애니메이션 규칙을 사용하여 애니메이션 키 프레임 세트를 적용합니다.

• 애니메이션의 길이를 나타냅니다. 애니메이션은 시간 경과에 따른 변화이므로 애니메이션 태그에도 초 또는 밀리 초 단위로 측정되는 지속 시간이 필요합니다.

• 여유분 결정: 여유는 애니메이션이 애니메이션 세그먼트의 시작과 끝 부분에서 어떻게 작동 하는지를 나타냅니다. 여기에 사용 된 선형 규칙은 애니메이션을 일정한 속도로 유지합니다. 또한 (기본 동작) ease-in-out을 사용하여 요소를 가변 비율로 이동시킬 수 있습니다.

• 반복 횟수 결정: 애니메이션을 반복 할 횟수를 지정할 수 있습니다. 이 부분을 나가면 페이지가 처음로드 될 때 애니메이션이 한 번만 발생합니다. infinite를 지정하면 페이지가 메모리에있는 동안 애니메이션을 반복 할 수 있습니다.

설정 가능한 다른 많은 매개 변수 (예: 여유 및 지연)가 있습니다. 애니메이션 규칙 또는 개별 규칙을 통해 설정할 수 있습니다. 지금은 브라우저가 공급 업체 프리픽스없이 애니메이션을 모두 관리 할 수있을 때까지 가능한 한 단순하게 애니메이션을 유지하려고 할 수 있습니다.