44. Splash Screen 만들기 (html,css - Splash 화면 2)

1) 애니메이션 주기

friends.css 화면

에니매이션을 만들고 splash 화면에 적용함.

이 애니메이션은 진하기가 1에서 0으로 가는 애니메이션을

1초 동안 줌.

 

 

적용된 모습

애니메이션이 진행됨.

 

 

 

2) 애니메이션 마지막 속성 유지하기

friends.css 화면

forwards는 마지막 속성 값을 애니메이션이 끝나도 유지하게 함

 

 

적용한 모습

애니메이션이 끝나면 opacity:1로 돌아가는게 아니라

opacity:0이 애니메이션이 끝나도 유지됨.

 

 

하지만 화면에서 완전히 사라지는 것이 아님.

 

 

friends.css 화면

마지막 투명도를 높여서 확인해보면

 

 

적용된 모습

이렇게 완전히 사라진 것이 아닌 화면에 남아있는 것을 볼 수 있음.

그렇기에 클릭이 되지 않음.

 

 

 

3) 화면 숨기기

friends.css 화면

visibility: hidden을 해주어 화면을 숨겨줌.

 

 

적용한 모습

클릭도 되고 화면에서 보이지 않지만 브라우저에서 완전히 사라진 것은 아님.

검사를 눌러 확인해보면 남아있는 것을 볼 수 있음.

 

뭔가를 숨기거나 html을 제거하고 싶다면 JavaScript가 필요함.

 

JavaScript를 사용하지 않은 지금은

단지 브라우저가 이 요소를 무시하도록 한 것임.

 

 

 

4) 애니메이션 딜레이

friends.css 화면

animation-delay를 하여

애니메이션이 시작하기 전에 설정한 시간만큼 딜레이를 줌.

 

 

적용한 모습

설정한대로 1초동안의 딜레이를 주고 애니메이션이 재생됨.