CoCoa Talk 8 - 2 animation

네브바에 애니메이션 추가하기.

 

우선 네브바 버튼중 채팅창 버튼에 notification부분에 애니메이션 효과를 준다.

간단하다 @keyframes를 이용해 0%일때 트랜스폼은 none이고 50%일때 트랜스폼은

Y축으로 trasnlate -5px rotate 180도를 준다

100%일때는 transform을 다시 none으로 만들어 준다.

그런다음 notification속성에 애니메이션을 넣어주면 된다 계속 지속되기 위해 infinite특성을 붙여주자

 

그리고 네브바에 버튼들이 아래서 차례대로 올라오는 효과를 주자.

nav_btn 클래스들에 @keyframes를 이용해 메소드를 하나 만들어 준다

Y축으로 50픽셀 아래서 올라오는 효과인데

transform: trasnlateY(50px)을 keyframes에 from에 넣어주면 초기 시작점이 처음 배치된 공간으로 고정된 채로 애니메이션 효과가 생긴다. 이를 해결하기 위해 아에 nav_btn자체에 transform을 주면 아래부터 하나씩 올라오게 된다

from{} to{} 구문은 투명도면 0에서 1로 바꿔주고 to에서 transform효과를 없앤다.

그리고 마지막 to구문이 지속되기 위해 forwards특성을 사용하자

 

and 하나씩 올라오는 효과를 주기위해

딜레이를 준다 각 자식요소마다

animation-delay를 이용해 시간값을 적당히 줘보자 ~

된다~

이것도 역시 gif를 아직 못 만들어서 글만 남긴다.