[HTML+CSS] 애니메이션

일단 HTML로 div 태그 하나를 만들고

 

 

CSS로 가서 keyframes를 이용해 애니메이션 하나를 만든다.

from은 맨 처음 여기서부터 시작한다는 뜻으로, 애니메이션의 초기 형태를 나타낸다.

to는 애니메이션이 마쳤을 때의 최종 형태를 나타낸다. 

애니메이션의 중간 형태를 나타내고 싶다면, from과 to 사이에, 50%{}를 만들어 설정하면 된다.

처음 색깔은 빨간색, 마지막 색깔은 파란색, 그리고 X축으로 100% 정도 이동하는 애니를 만들었다.

 

 

 

마찬가지로 CSS에서 태그의 형태를 만든다. border-radius 50%로 완전한 원을 만든다.

그리고 animation-name을 이용해 적용할 애니메이션을 넣고, 애니메이션이 실행되는 시간을 설정한다.

참고로 애니메이션이 실행되는 시간, animation-duration는 필수요소로, 이것이 없다면 애니메이션은 실행이 되지 않는다.

 

 

 

실행 결과, 빨간색에서 서서히 파란색으로 변하면서 x축으로 이동하는 것을 확인할 수 있다.

 

 

 

 

transform에 rotate를 추가하여 회전을 하도록 해봤다. 180deg는 180도 회전을 의미한다.

 

 

 

 

회전하는지 확인하기 위해 원형에서 사각형으로 바꿨다. 빨강에서 파랑으로 변함과 동시에 x축으로 가는 동시에..

180도로 회전을 하는 것을 확인할 수 있다.

 

 

 

animation-iteration-count를 해당 애니메이션을 반복하는 횟수를 설정할 수 있다. infinite는 무한히

animation-direction은 애니메이션 종료시, 처음부터 시작할지, 아님 반대방향으로 시작할지 결정한다. alternate는 되감기

animation-timing-function은 키프레임 전환 형태를 지정한다.