5 키즈가오 science 공간에 애니메이션 적용하기

 

science 공간에는 비커가 상하로 회전하는 애니메이션을 적용합니다. 회전 애니메이션은 키즈가오에서 가장 많이 사용하는 애니메이션입니다. intro와 farm 공간에 적용한 회전 애니메이션과 구현 방법이 동일하므로 기존의 회전 애니메이션에 사용한 CSS 속성을 복사하여 붙여 넣은 다음 애니메이션 이름, 속도, 횟수, 진행 방향, 각도 등의 특정 속성값만 수정하면 손쉽게 구현할 수 있습니다.

왼쪽 상단에 있는 비커의 애니메이션 이름을 spinGly, 오른쪽 상단에 있는 비커의 애니메이션 이름을 spinWater로 입력합니다. 둘 다 지속 시간을 1500ms, 속도를 linear, 횟수를 infinite, 진행 방향을 alternate로 입력합니다.