KokoaTalk Clone Coding: more(animation) 1

screen-header의 setting icon에 마우스를 올려놓으면, 회전할 수 있도록 animation 생성

 

회전하려면 z축을 따라 rotate 시켜야 함

 

setting icon의 클래스를 찾아 작성

from-to 단계로 아무것도 실행되지 않는 상태에서 회전하는 상태로 변경

 

완성

 

heart icon 위에 마우스를 올려놓으면 심장이 뛰는 것 처럼 animation 생성

 

animation이 실행되면 실행 할 내용이 없는 상태 - 실행 - 실행 할 내용이 없는 상태 3단계를 거침

실행할 내용: 색이 변하면서 크기가 커지면 심장이 뛰는 것처럼 표현됨

크기가 커지는 과정에서 icon에 위치가 약간씩 변하는 움직임이 생김

will-change 를 통해 브라우저에게 변화가 생길 것임을 알려줄 수 있음

 

완성