[ CSS애니메이션 / Animation1-1 응용 ]

1. keyfram 값에 각각의 transform  을 넣어 이곳 저곳 움직이는 공을 만들어보자 

2. 움직이면서 색이 변하는 공을 만들어 보자. 

 

See the Pen Untitled by 김하은 (@king_coding) on CodePen.

-  % 마다 transform 의 값이랑 background 의 색을 다르게 하였다. 

- border-radius을 통해 원형의 값을 만들어 주고 크기를 퍼센트로 정하였다. 

- 안에 들어갈 텍스트 값은 .box 가 아닌 .circle 로 바꿔 넣었다. 

 

= 부족한점 =

최대한 배운것 안에서 원형을 만들어야 해서 매끄럽지 않다 .

원형이 튕기는듯 하다가 마지막 애니메이션에 느리게 원래 자리로 돌아간다.