CoCoa Talk 8 - 1 animation

키보드 만드는건 버리고

애니메이션 추가로 넘어 간다.

첫화면인 friends로 들어가면 카카오톡 화면이 뜨고 사라지는 것이다.

div.splash-screen을 만들고 안에 로고? 아이콘을 넣어준다.

백그라운드 색상 변경을 해주고 높이 100vh 너비 100vw top0 flex, center로 만들어준다

내 경우 statusbar가 픽스드 되어 가장 높이 설정되어 있기 때문에

z-index를 100으로 줘서 제일 위로 오게 했다.

 

이제 전에 배웠던 애니메이션 효과를 주는

@keyframes를 쓴다

from {} to {} 구문을 활용해서

opacity를 조절해주고

#splash-screen에 animation : 애니명 1s ease-in-out을 설정한다

이렇게만 하면 애니메이션이 끝나면 다시 원래 상태로 돌아가서 화면이 다 가려진다

해결을 위해 forwards를 주자

forwards를 주면 마지막 애니메이션 상태로 계속 지속된다

developer.mozilla.org/ko/docs/Web/CSS/@keyframes

@keyframes - CSS: Cascading Style Sheets | MDN

 

그러나 클릭이 되지 않는다 !~ 지속이!! 되기 때문에 눈에 보이진 않지만 저 스크린이 이미 가리고 있는 것이다.

display:none;도 통하지 않는다.

해결법은 visibility : hidden이다 사용시 마지막 상태로 유지되며 마우스에 클릭되지 않도록 가려주는 것이다

엘레멘트가 사라지는게 아니라 그냥 저부분이 클릭 되지 않도록 해놓는 것이다.

실제로 요소가 사라지게 하기 위해서는 자바스크립트를 적용해야한다.

 

아직 화면녹화를 못해서... ㅜㅜ 글만 쓴다... ㅎㅎㅎㅎ

developer.mozilla.org/ko/docs/Web/CSS/visibility

visibility - CSS: Cascading Style Sheets | MDN