노마드코더/코코아톡 클론코딩
44. Splash Screen 만들기 (html,css - Splash 화면 2)
Wisdom_1104
2022. 12. 11. 03:54
1) 애니메이션 주기
에니매이션을 만들고 splash 화면에 적용함.
이 애니메이션은 진하기가 1에서 0으로 가는 애니메이션을
1초 동안 줌.
애니메이션이 진행됨.
2) 애니메이션 마지막 속성 유지하기
forwards는 마지막 속성 값을 애니메이션이 끝나도 유지하게 함
애니메이션이 끝나면 opacity:1로 돌아가는게 아니라
opacity:0이 애니메이션이 끝나도 유지됨.
하지만 화면에서 완전히 사라지는 것이 아님.
마지막 투명도를 높여서 확인해보면
이렇게 완전히 사라진 것이 아닌 화면에 남아있는 것을 볼 수 있음.
그렇기에 클릭이 되지 않음.
3) 화면 숨기기
visibility: hidden을 해주어 화면을 숨겨줌.
클릭도 되고 화면에서 보이지 않지만 브라우저에서 완전히 사라진 것은 아님.
검사를 눌러 확인해보면 남아있는 것을 볼 수 있음.
뭔가를 숨기거나 html을 제거하고 싶다면 JavaScript가 필요함.
JavaScript를 사용하지 않은 지금은
단지 브라우저가 이 요소를 무시하도록 한 것임.
4) 애니메이션 딜레이
animation-delay를 하여
애니메이션이 시작하기 전에 설정한 시간만큼 딜레이를 줌.
설정한대로 1초동안의 딜레이를 주고 애니메이션이 재생됨.