100일 CSS #4 : 로딩

문제

https://100dayscss.com/days/4/

 

Loading: The best are always websites that do not need a loading status. If they do, here would be a calming one.
로딩 : 가장 좋은 것은 항상 웹사이트에서 로딩 상태가 필요하지 않은 것 입니다. 만약 필요하다면, 여기 마음을 편안하게 해줄 로딩 애니메이션이 있습니다.

 

내 풀이

See the Pen Untitled by dobbyjang0 (@dobbyjang0) on CodePen.

애니메이션의 타이밍을 잡는게 어려웠다. alternate로 정재생 후 역재생을 해주는게 좋았다.

 

예시 모범답안

See the Pen 004 - Loading by Matthias Martin (@roydigerhund) on CodePen.