26. Animation (2)

4) from to의 부자연스러움

이미지가 이동되면서 끊기는 형상이 생김

to에서 자리를 이동시키면 다시 from으로 돌아갈 때

자연스럽게 돌아가는 것이 아닌 갑자기 이동하면서 부자연스럽게 됨.

 

 

 

5) %로 구간 나누기

끊기는 구간 없이 자연스럽게 움직임

%로 구간을나눔.

0% -> 50% -> 100로 구간을 나누어,

구간마다 변화를 설정하여 중간에 이미지의 위치가 이동하더라도

자연스럽게 원래 위치로 돌아올 수 있게 하여 자연스럽게 재생되도록 함.

 

0~100%까지 원하는대로 구간을 설정하여 사용 가능함.

예를 들어,

0% 100%

0% 50% 100%

0% 25% 50% 75%100%

.

.

.

다양하게 구간을 설정하여 사용 가능함.

 

 

 

Animate.css 를 참고하면 다양한 애니메이션을 볼 수 있음.