Currently, I am facing an issue with my login and logout page that includes a splash screen. The splash screen works perfectly on the load page without using any jQuery or JavaScript functionalities. It is created using CSS3 animations. However, when I click on the logout button, the same splash screen animation repeats itself. I do not want the splash screen to appear again when the logout button is clicked. I only want it to be displayed on the onload page and then removed when the logout button is clicked. I have tried using .hide() and .remove(), but they do not seem to work. Can someone please assist me in modifying the code so that the splash screen is only shown on load and removed on logout? CSS3 animation:
/* SPLASH SCREEN */
#splash {
background-color: #fc9204 !important;
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
z-index: 10;
transition-property: top;
-webkit-animation: slide-out-fwd-center 7.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-out-fwd-center 7.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-out-fwd-center {
0% {
-webkit-transform: translateZ(1);
transform: translateZ(1);
opacity: 1;
}
100% {
-webkit-transform: translateZ(600px);
transform: translateZ(600px);
opacity: 0;
}
}
@keyframes slide-out-fwd-center {
0% {
-webkit-transform: translateZ(1);
transform: translateZ(1);
opacity: 1;
}
100% {
-webkit-transform: translateZ(600px);
transform: translateZ(600px);
opacity: 0;
}
}
#splash img {
display: block;
margin: 200px auto;
width: 100px;
height: 200px;
-webkit-animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-fwd-center {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
100% {
-webkit-transform: translateZ(160px);
transform: translateZ(160px);
}
}
@keyframes slide-fwd-center {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
100% {
-webkit-transform: translateZ(160px);
transform: translateZ(160px);
}
}