키 프레임을 사용하여 애니메이션을 만드는 방법 - 인형

비디오: 선(Line)과 도형을 그려 애니메이션(키프레임)을 입히는 애프터 이펙트 꿀팁 2024

iPad 및 iPhone에 표시 할 웹 사이트에 애니메이션 효과를 만들려면 키 프레임을 사용해야합니다. 더 복잡한 CSS 3 애니메이션은 키 프레임에 의존합니다. 키 프레임 은 무언가가 변경되는 애니메이션 내의 포인트입니다. 애니메이션 개체를 변경하려면 새 키 프레임을 만들어야합니다.

예를 들어, 그림에서와 같이 튀는 공에 애니메이션을 적용하려면 바운스 상단에 키 프레임이 있어야하고 바운스 하단에는 키 프레임이 있어야합니다.

초 단위의 튀는 공이 나타납니다.

이 예에서, 볼은 직경이 50 픽셀이고 볼의 컨테이너는 350 픽셀입니다. 따라서 첫 번째 키 프레임은 볼을 컨테이너 아래쪽에 배치하고 마지막 키 프레임은 컨테이너의 맨 위에 배치합니다.

@ - webkit-keyframes는 {margin: 300px auto 0;}에서 {margin: 0 auto 0;}}로 바운스됩니다.

@ -webkit-keyframes 블록에는 각 키 프레임을 정의하는 규칙이 있습니다. 키 프레임은 애니메이션 내에서 그 순간의 스타일을 정의합니다. 여기에 표시된 예와 같이 시작과 끝을 갖거나 중간에 임의의 수의 지점을 정의 할 수 있습니다. 일부 웹 브라우저는이 스타일을 다른 스타일보다 부드럽게 적용하지만, iPhone 및 iPad의 Safari는이 기능을 아주 잘 만듭니다.

를

아래 에서 위쪽 으로 이동시킵니다. 키 프레임 세트로 애니메이션을 정의 할 때 다음 웹킷 애니메이션 속성을 사용할 수 있습니다. animation-name - 사용되는 애니메이션을 정의합니다. 앞서 정의한 키 프레임 세트를

바운스

, 로 지정하십시오. 이름이 없거나 빠진 경우 브라우저는 기본값 none을 가정하고 애니메이션이 생성되지 않습니다. -webkit-animation-name: bounce; animation-duration - 애니메이션의 길이를 정의합니다. 시간 값 형식은 시간 단위 식별자가 뒤에 오는 숫자입니다. 시간 단위 식별자는 밀리 초 동안 ms이고 초 단위로 초입니다 (1000ms, 1s). 튀는 공의 애니메이션은 1 초간 지속됩니다.
```
이 그림은 브라우저가 상단과 하단 사이의 프레임 인
```
트위닝 된

프레임을 자동으로 만드는 방법을 보여줍니다. 시작과 끝을 정의하면 브라우저는 "in-this 트윈 의 내용을 채 웁니다. " webkit-animation-duration: 1s; animation-iteration-count - 애니메이션주기가 재생되는 횟수를 정의합니다.기본값은 1이며이 값은 처음부터 끝까지 애니메이션을 재생합니다. 무한대의 값은 애니메이션이 영원히 반복되도록합니다. 이 정보를 기반으로 추측 할 수 있듯이 다음 예제에서는 애니메이션이 10 번 재생됩니다.
```
-webkit-animation-iteration-count: 10;
```
animation-direction - 애니메이션이 매주기마다 반대로 재생되어야하는지 여부를 정의합니다. alternate를 지정하면 다른 모든 애니메이션 사이클이 반대 방향으로 재생됩니다. 애니메이션이 반대로 재생되면 타이밍 기능도 반대로됩니다.
```
이것은 공이 튀어 오르는 것으로 정의해야하는 이유입니다. 대체 애니메이션이 반대로 재생되어 공을 상자 바닥으로 가져옵니다 (중력과 달리).
```
- 웹킷 - 애니메이션 - 방향: 대체;

튀는 공 애니메이션을 만드는 스타일 규칙은 다음과 같습니다.

#animationDemo #ball {-webkit-animation-name: bounce; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 10; -webkit-animation-direction: alternate;}

하나 이상의 속성을 입력 할 때 다음 순서를 따르십시오.