더북(TheBook)

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

 

forest1 공간에는 토끼가 회전하는 애니메이션, forest2 공간에는 기계가 좌우로 움직이는 애니메이션, forest3 공간에는 새가 회전하는 애니메이션을 적용합니다. forest1forest3 공간에는 intro 공간에 적용한 동물들의 회전 효과를 똑같은 방법으로 적용하면 됩니다. forest2 공간에 적용할 기계가 좌우로 움직이는 애니메이션 역시 intro 공간에 적용한 잠자리가 움직이는 애니메이션을 응용하면 됩니다.

먼저 forest1 공간에서 큰 토끼와 작은 토끼에 각각 spinRabbitOnespinRabbitTwo 애니메이션 이름을 적용합니다. 애니메이션 지속 시간을 1000ms(1초), 속도를 linear로 입력합니다. 횟수는 제한이 없기 때문에 infinite를 사용하고, 애니메이션 진행 방향은 반복 효과를 적용하기 위해 alternate를 적용합니다. from ~ to에는 각도를 조정할 수 있도록 transform: rotate()를 사용합니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.