3) steps를 이용한 시작화면

transition 기능을 어떻게 프로젝트에 끼워넣을까 고민하다가 steps 기능을 알게 되었다.

트위터의 즐겨찾기 기능의 애니메이션 효과라고 한다.

위와 같은 이미지 모음을 일렬로 배치해서 사용한다. 각 프레임당 한 칸씩 보여주면서 지나가게 된다.

(https://cssanimation.rocks/images/posts/steps/twitter_fave.png 에서 다운로드 받을 수 있다.)

steps 기능은 위와 같이 단계별로 나눠서 급격하게 이동하며 보여준다.

See the Pen twitter fave by Douglas Ham (@uzugoer) on CodePen.

별모양에 <a> 태그를 이용해서 다음 화면으로 넘어가도록 했다.

출처 : https://cssanimation.rocks/twitter-fave/