천진난만 코딩 스토리
44. Splash Screen 만들기 (html,css - Splash 화면 2) 본문
1) 애니메이션 주기
에니매이션을 만들고 splash 화면에 적용함.
이 애니메이션은 진하기가 1에서 0으로 가는 애니메이션을
1초 동안 줌.
애니메이션이 진행됨.
2) 애니메이션 마지막 속성 유지하기
forwards는 마지막 속성 값을 애니메이션이 끝나도 유지하게 함
애니메이션이 끝나면 opacity:1로 돌아가는게 아니라
opacity:0이 애니메이션이 끝나도 유지됨.
하지만 화면에서 완전히 사라지는 것이 아님.
마지막 투명도를 높여서 확인해보면
이렇게 완전히 사라진 것이 아닌 화면에 남아있는 것을 볼 수 있음.
그렇기에 클릭이 되지 않음.
3) 화면 숨기기
visibility: hidden을 해주어 화면을 숨겨줌.
클릭도 되고 화면에서 보이지 않지만 브라우저에서 완전히 사라진 것은 아님.
검사를 눌러 확인해보면 남아있는 것을 볼 수 있음.
뭔가를 숨기거나 html을 제거하고 싶다면 JavaScript가 필요함.
JavaScript를 사용하지 않은 지금은
단지 브라우저가 이 요소를 무시하도록 한 것임.
4) 애니메이션 딜레이
animation-delay를 하여
애니메이션이 시작하기 전에 설정한 시간만큼 딜레이를 줌.
설정한대로 1초동안의 딜레이를 주고 애니메이션이 재생됨.
'노마드코더 > 코코아톡 클론코딩' 카테고리의 다른 글
46. More Animation 만들기 (html,css - 기타 Animation ) (0) | 2022.12.11 |
---|---|
45. Navigation Animation 만들기 (html,css - Navigation Animation ) (0) | 2022.12.11 |
43. Splash Screen 만들기 (html,css - Splash 화면 1) (1) | 2022.12.11 |
42. Chat Screen 화면 만들기 (html,css - Write Message Input ) (0) | 2022.12.11 |
41. Chat Screen 화면 만들기 (html,css - 채팅화면 5) (0) | 2022.12.09 |