100일 CSS 챌린지 #11 : 워킹 부츠

문제

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

 

Walking Boots: These boots are made for walking. Where are they going and for how long?
워킹 부츠: 이 부츠는 걷기 위해 만들어졌습니다. 그들은 어디로, 얼마나 오랫동안 갈 예정인가요?

 

내 풀이

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

 신발을 요소로 감싸줘서 신발에는 회전을, 감싼 요소에는 평행이동을 걸어줘서 애니메이션 2개를 동시에 시행하는 효과를 주었다. 위와 같이 요소 4개를 만들어 신발 위치를 잡아준 다음 이를 애니메이션으로 바꾸었다. 신발 이미지는 아래 사진을 이용하였다.

 

 하지만 이렇게 하니 모범 답안과 같이 톡톡 튀는 느낌이 아니라 딱딱한 느낌이 들었다. timing-function이 문제인가 싶어 ease-in-out으로 바꾸었더니 애니메이션이 요상하게 툭툭 끊겼다. 아마 transform-origin을 잘 조정해서 평행이동되는 거리를 최소화하고, 회전이동을 2단계로 간단하게 끊어야 되나 싶다.

 

예시 모범답안

See the Pen 011 - Walking Boots by Matthias Martin (@roydigerhund) on CodePen.