CoCoa Talk 8 - 3 animation

이번엔 설정창으로 들어가는 톱니바퀴에 애니메이션을 준다

역시 @keyframes로 method를 하나 만들어준다

시작은 none;   끝은  z축으로 360도 회전하게 해준다~

그리고 .screen_header--icons .fa-cog 에 animation 효과로 2초간 linear로 infinite한 효과다.

잘 굴러간다~

 

이번엔 find.html의 open-post에 하트 아이콘 애니메이션을 넣어보자

 

먼저 하트 아이콘의 위치는 .open-post__heart__count안에 있다

여기에 마우스를 가져가면 하트의 색상 변화 및 scale을 조절해 움직이도록 해주자

0%일때는 흰색에 트랜스폼은 논이고 50%일때 컬러가 바뀌고 scale은 1.5로 들어간다

여기서 scale은 x,y축에 따로 줄수 있지만 전체가 커지기 때문에 하나의 값으로 준다.

그리고 100%가 되면 다시 처음으로 돌아온다~

 

애니메이션 속성을 open-post__heart__count:hover i 에 주자 2초간 등속으로 무한히 실행되도록한다

 

다시 한번 참고하자

linear : 등속변화

ease : slow-fast-slow

ease-in : going faster

ease-in-out :slow-nomal-slow

ease-out : going slower

 

근데 이렇게 변화를 주니 떨림이 생긴다

브라우저가 반응이 어쩌구 한다는데 잘 못알아 먹겠다 ㅋ

암튼 이때 써줄 수 있는게 will-change이다.

will-change는 요소에 예상되는 변화의 종류에 관한 힌트를 브라우저에게 제공한다.

실제 요소가 변화되기 전에 미리 브라우저는 적절히 최적화를 할 수있다.

이로 인해 페이지의 반응성이 증가된다.

will-change는 자주 쓰면 안된다. 그래픽을 이용하기 때문에 페이지속도를 늦추거나 엄청난 자원을 소비할 수 있다.

developer.mozilla.org/ko/docs/Web/CSS/will-change

will-change - CSS: Cascading Style Sheets | MDN

여기서는 transform이라는 변화가 있을거라고 알려주기 위해 will-change : transform 구문을 넣었다

 

잘 작동된다.